diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
index ae1db4ac..d4d38d4b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -106,7 +106,6 @@
             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
             border-radius: 8px;
         }
-
         @media (max-width: 767px) {
             #translate_control {
                 display: block;
@@ -116,7 +115,6 @@
                 z-index: 1000000;
             }
         }
-
         .translate-trigger {
             background-color: #7378c5;
             color: white;
@@ -128,7 +126,6 @@
             background-color: #ff8623;
             transition: 0.1s ease-in;
         }
-
         #google_translate_element {
             display: none;
             position: fixed;
@@ -143,7 +140,6 @@
             font: inherit;
             color: white;
         }
-
         .goog-te-combo {
             background-color: #7378c5 !important;
             color: white !important;
@@ -152,16 +148,13 @@
             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;
@@ -171,13 +164,11 @@
                 bottom: 70px;
             }
         }
-
         .load-more-container {
             width: 100%;
             text-align: center;
             margin-top: 20px;
         }
-
         .load-more-container button {
             margin: 10px auto;
             background-color: #7378c5;
@@ -190,15 +181,12 @@
             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;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/index.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/index.html
new file mode 100644
index 00000000..89635dda
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/index.html
@@ -0,0 +1,1485 @@
+<!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>
+
+    <!-- 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" />
+    <meta http-equiv="content-language" content="en" />
+    <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse - Your Ultimate Movie Guide" />
+    <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, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, movieverse, film" />
+    <meta name="author" content="Son Nguyen Hoang">
+    <link rel="canonical" href="https://movie-verse.com/"/>
+    <meta name="robots" content="index, follow">
+    <meta name="rating" content="General">
+    <meta name="revisit-after" content="3 days">
+    <meta name="distribution" content="global">
+    <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 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 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>
+    <link rel="preload" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css" as="style">
+    <link rel="stylesheet" href="https://movie-verse.com/MovieVerse-Frontend/css/style.css">
+    <link rel="icon" type="image/x-icon" href="https://movie-verse.com/images/favicon.ico">
+    <link rel="manifest" href="https://movie-verse.com/manifest.json">
+    <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">
+        {
+            "@context": "http://schema.org",
+            "@type": "Movie",
+            "name": "Inception",
+            "image": "https://movie-verse.com/images/inception.jpg",
+            "director": {
+                "@type": "Person",
+                "name": "Christopher Nolan",
+                "url": "https://movie-verse.com/MovieVerse-Frontend/html/christopher-nolan.html",
+                "birthDate": "1970-07-30",
+                "birthPlace": {
+                    "@type": "Place",
+                    "name": "London, England"
+                },
+                "award": "Academy Award for Best Original Screenplay"
+            },
+            "genre": ["Action", "Adventure", "Sci-Fi"],
+            "actor": [
+                {
+                    "@type": "Person",
+                    "name": "Leonardo DiCaprio",
+                    "url": "https://movie-verse.com/MovieVerse-Frontend/html/leonardo-dicaprio.html",
+                    "birthDate": "1974-11-11",
+                    "birthPlace": {
+                        "@type": "Place",
+                        "name": "Los Angeles, California, USA"
+                    }
+                }
+            ],
+            "aggregateRating": {
+                "@type": "AggregateRating",
+                "ratingValue": 8.8,
+                "bestRating": 10,
+                "worstRating": 1,
+                "reviewCount": 1043299
+            },
+            "review": {
+                "@type": "Review",
+                "author": {
+                    "@type": "Person",
+                    "name": "Michael Patrick"
+                },
+                "datePublished": "2024-03-06",
+                "reviewRating": {
+                    "@type": "Rating",
+                    "ratingValue": 9.0,
+                    "bestRating": 10,
+                    "worstRating": 1
+                },
+                "reviewBody": "Inception is a masterpiece of narrative complexity, with an innovative structure and a compelling exploration of themes such as dream manipulation and the nature of reality."
+            },
+            "description": "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.",
+            "datePublished": "2010-07-16",
+            "duration": "PT148M",
+            "contentRating": "PG-13",
+            "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
+        }
+    </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-right: 0 !important;
+        }
+        @media (min-width: 800px) {
+            #form {
+                margin-top: 10px !important;
+            }
+        }
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
+        #stats-display:hover {
+            color: #ff8623;
+        }
+        #stats-label:hover {
+            color: #ff8623;
+        }
+        body {
+            background-image: url("https://movie-verse.com/images/universe-1-small.webp");
+        }
+        @media (min-width: 1024px) {
+            body {
+                background-repeat: repeat-y;
+                background-size: 100% auto;
+            }
+        }
+        main {
+            margin-left: 0;
+        }
+        #highlight {
+            color: orange;
+        }
+        #highlight:hover {
+            color: #ff8623 !important;
+        }
+        #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;
+        }
+        #chat-button,
+        #settings-btn,
+        #movie-of-the-day-btn,
+        #movie-match-btn,
+        #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,
+            #trivia-btn,
+            #back-to-top-btn {
+                position: fixed;
+                right: 10px;
+                z-index: 1000;
+            }
+            #menu-btn {
+                display: block;
+            }
+        }
+        @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;
+            }
+        }
+        #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;
+            }
+        }
+        #githubLink {
+            color: white !important;
+        }
+        #githubLink:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink7 {
+            color: white !important;
+        }
+        #githubLink7:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink8 {
+            color: white !important;
+        }
+        #githubLink8:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink9 {
+            color: white !important;
+        }
+        #githubLink9:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink10 {
+            color: white !important;
+        }
+        #githubLink10:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink11 {
+            color: white !important;
+        }
+        #githubLink11:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink12 {
+            color: white !important;
+        }
+        #githubLink12:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink14 {
+            color: white !important;
+        }
+        #githubLink14:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink15 {
+            color: white !important;
+        }
+        #githubLink15:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink16 {
+            color: white !important;
+        }
+        #githubLink16:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink19 {
+            color: white !important;
+        }
+        #githubLink19:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink3 {
+            color: white !important;
+        }
+        #githubLink3:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink4 {
+            color: white !important;
+        }
+        #githubLink4:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink5 {
+            color: white !important;
+        }
+        #githubLink5:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #githubLink6 {
+            color: white !important;
+        }
+        #githubLink6:hover {
+            color: #ff8623 !important;
+            transition: 0.1s ease-in;
+        }
+        #other {
+            margin-top: 40px;
+        }
+        #director-spotlight-title {
+            margin-top: 40px;
+        }
+        .pagination {
+            min-height: 54px;
+            text-align: center;
+        }
+        #ad-container {
+            display: block;
+        }
+        #ad-container1 {
+            display: block;
+        }
+        #ad-container2 {
+            display: block;
+        }
+        #ad-container3 {
+            display: block;
+        }
+        #ad-container4 {
+            display: block;
+        }
+        #ad-container5 {
+            display: block;
+        }
+        #ad-container6 {
+            display: block;
+        }
+        #ad-container7 {
+            display: block;
+        }
+        #my-heading {
+            margin-top: 19.5px !important;
+        }
+        #my-heading1 {
+            margin-top: 19.5px !important;
+        }
+        @media (min-width: 767px) {
+            #my-heading {
+                margin-top: -5px !important;
+            }
+
+            #my-heading1 {
+                margin-top: -5px !important;
+            }
+        }
+        @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;
+        }
+        #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;
+        }
+        @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;
+        }
+    </style>
+</head>
+
+<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>
+
+<body>
+    <header id="homepage-header" style="margin-bottom: -10px">
+        <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
+            <a id="indexLink" href="#" 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 on this machine">
+            <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" style="z-index: 200000" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+        <button class="back-btn nav-btn notranslate" id="home-btn" title="Go back to homepage">Home</button>
+        <button class="about nav-btn notranslate" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
+        <button class="favorites-btn nav-btn notranslate" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='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="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="form">
+            <div class="search-container">
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px; margin-right: 5px" class="search" title="Search for movies, actors, TV series, and more!" required />
+                <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="notificationBtn" style="z-index: 200000" class="notification-btn" title="Notifications">
+            <i class="fas fa-bell" id="bellIcon" style="font-size: 15px"></i>
+        </button>
+        <div id="notificationModal" class="notification-modal" style="display: none;">
+            <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;">
+                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="MovieVerse-Frontend/html/analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="#most-popular">Popular Worldwide</a></li>
+            <li><a href="#recommended">Recommendations</a></li>
+            <li><a href="#award-winning">Award-Winning</a></li>
+            <li><a href="#director-spotlight">Director's Spotlight</a></li>
+            <li><a href="#action">Action</a></li>
+            <li><a href="#vietnamese">Vietnamese</a></li>
+            <li><a href="#indian">Indian</a></li>
+            <li><a href="#korean">Korean</a></li>
+            <li><a href="#tv-series">TV Series</a></li>
+            <li><a href="#hidden-gems">Hidden Gems</a></li>
+            <li><a href="#horror">Horror</a></li>
+            <li><a href="#documentary">Documentary</a></li>
+            <li><a href="#animation">Animation</a></li>
+            <li><a href="#sci-fi">Science Fiction</a></li>
+            <li><a href="#western">Western</a></li>
+            <li><a href="#romantic">Romantic</a></li>
+            <li><a href="#thriller">Thriller</a></li>
+            <li><a href="#war">War</a></li>
+            <li><a href="#mystery">Mystery</a></li>
+            <li><a href="#crime">Crime</a></li>
+            <li><a href="#comedy">Comedy</a></li>
+            <li><a href="#fantasy">Fantasy</a></li>
+            <li><a href="#family">Family</a></li>
+            <li><a href="#musical">Musical</a></li>
+            <li><a href="#drama">Drama</a></li>
+            <li><a href="#classic">Classic</a></li>
+            <li><a href="MovieVerse-Frontend/html/sign-in.html">Sign In/Sign Up</a></li>
+            <li><a href="MovieVerse-Frontend/html/user-profile.html">User Profile</a></li>
+            <li><a href="MovieVerse-Frontend/html/support.html">MovieVerse Support</a></li>
+            <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>
+            <i class="fas fa-sign-in-alt" id="mobileSignInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="mobileSignOutIcon" style="display: none;"></i>
+        </button>
+        <button id="mobileProfileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="mobileProfileText">Profile</span>
+            <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"
+             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 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
+        </h2>
+    </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"
+             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="githubLink7" href="MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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"
+             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="githubLink12" href="MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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"
+             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>
+
+    <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"
+             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="githubLink4" href="MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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"
+             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="githubLink15" href="MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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"
+             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="githubLink6" href="MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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"
+             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="githubLink19" href="/MovieVerse-Frontend/html/feedback.html">feedback</a> if you find the ad inappropriate or irrelevant.</p>
+    </div>
+    <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>
+    <button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 220px; right: 10px; z-index: 1001">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 185px; right: 10px; z-index: 1001" title="Explore movies through different eras!">Movie Timeline</button>
+    <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>
+            <span>Chat</span>
+        </a>
+        <a href="MovieVerse-Frontend/html/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="MovieVerse-Frontend/html/movie-match.html" class="bottom-bar-item">
+            <i class="fas fa-film"></i>
+            <span>Match</span>
+        </a>
+        <a href="MovieVerse-Frontend/html/movie-timeline.html" class="bottom-bar-item">
+            <i class="fas fa-clock"></i>
+            <span>Timeline</span>
+        </a>
+        <a href="MovieVerse-Frontend/html/chatbot.html" class="bottom-bar-item">
+            <i class="fas fa-robot"></i>
+            <span>Chatbot</span>
+        </a>
+        <a href="MovieVerse-Frontend/html/trivia.html" class="bottom-bar-item">
+            <i class="fas fa-question-circle"></i>
+            <span>Trivia</span>
+        </a>
+        <a href="#" class="bottom-bar-item" onclick="scrollToTop()">
+            <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>
+
+    <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() {
+            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>
+    <script>
+        window.onload = function() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+            bottomBarAnchors.forEach(anchor => {
+                const anchorHeight = anchor.offsetHeight;
+                if (anchorHeight > maxHeight) {
+                    maxHeight = anchorHeight;
+                }
+            });
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = `${maxHeight}px`;
+            });
+        };
+
+        window.onresize = function() {
+            const bottomBarAnchors = document.querySelectorAll('.mobile-bottom-bar a');
+            let maxHeight = 0;
+            bottomBarAnchors.forEach(anchor => {
+                anchor.style.height = 'auto';
+            });
+            bottomBarAnchors.forEach(anchor => {
+                const anchorHeight = anchor.offsetHeight;
+                if (anchorHeight > maxHeight) {
+                    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-btn',
+                '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-btn',
+                    '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>
+    <script>
+        document.getElementById('settings-btn').addEventListener('click', () => {
+            window.location.href = 'MovieVerse-Frontend/html/settings.html';
+        });
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('nav a').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const href = this.getAttribute('href');
+                    if (href.startsWith('#')) {
+                        const targetMain = document.querySelector(href);
+                        let targetDiv = targetMain.previousElementSibling;
+                        while(targetDiv && !targetDiv.classList.contains('genres')) {
+                            targetDiv = targetDiv.previousElementSibling;
+                        }
+
+                        if (targetDiv) {
+                            targetDiv.scrollIntoView({ behavior: 'smooth' });
+                        }
+                    }
+                    else {
+                        window.location.href = href;
+                    }
+                });
+            });
+
+            document.getElementById("footer").addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            document.getElementById('heading-href').addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            document.getElementById('home-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            const sectionTitles = document.querySelectorAll('.genres h2');
+            sectionTitles.forEach(title => {
+                title.addEventListener('click', function() {
+                    this.parentElement.scrollIntoView({ behavior: 'smooth' });
+                });
+            });
+        });
+    </script>
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function() {
+                navigator.serviceWorker.register('MovieVerse-Frontend/js/service-worker.js').then(function(registration) {
+                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                }, function(err) {
+                    console.log('ServiceWorker registration failed: ', err);
+                });
+            });
+        }
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            checkApiStatusWithRetry(5);
+        });
+        function checkApiStatusWithRetry(retries, delay = 1000) {
+            const url = `https://${getMovieVerseData()}/3/configuration?${generateMovieNames()}${getMovieCode()}`;
+            fetch(url)
+                .then(response => {
+                    if (!response.ok) throw new Error(`API response failed with status: ${response.status}`);
+                    console.log("API is up and running!");
+                })
+                .catch(error => {
+                    if (retries > 0) {
+                        console.log(`Retrying API check... attempts left: ${retries - 1}`);
+                        setTimeout(() => checkApiStatusWithRetry(retries - 1, delay), delay);
+                    }
+                    else {
+                        console.error('API check failed after retries:', error);
+                        window.location.href = 'MovieVerse-Frontend/html/api_fails.html';
+                    }
+                });
+        }
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const bellIcon = document.getElementById('bellIcon');
+            bellIcon.classList.add('shake-animation');
+            setTimeout(() => {
+                bellIcon.classList.remove('shake-animation');
+            }, 500);
+        });
+    </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 clearSearchBtn = document.getElementById('clear-search');
+                const searchResultsContainer = document.getElementById('search-results');
+                const myHeading = document.getElementById('my-heading');
+                const localTime = document.getElementById('local-time');
+                viewAllResultsBtn.style.display = query ? 'block' : 'none';
+                function toggleButtons() {
+                    const query = searchInput.value.trim();
+                    viewAllResultsBtn.style.display = query ? 'inline-block' : 'none';
+                    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();
+                    myHeading.style.display = '';
+                    localTime.style.display = '';
+                }
+                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 = 'MovieVerse-Frontend/html/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/w185${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) {
+                if (item.media_type === 'movie') {
+                    localStorage.setItem('selectedMovieId', item.id);
+                    window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
+                }
+                else if (item.media_type === 'tv') {
+                    localStorage.setItem('selectedTvSeriesId', item.id);
+                    window.location.href = 'MovieVerse-Frontend/html/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 = 'MovieVerse-Frontend/html/director-details.html?' + item.id;
+                        }
+                        else {
+                            localStorage.setItem('selectedActorId', item.id);
+                            window.location.href = 'MovieVerse-Frontend/html/actor-details.html?' + item.id;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error fetching person details:', error);
+                    }
+                }
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            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 = 'MovieVerse-Frontend/html/search.html';
+                    }
+                }
+            });
+            searchInput.addEventListener('blur', clearSelection);
+        });
+    </script>
+</body>
+</html>
