index.html

<!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 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="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="keywords"
      content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film, movie, movieverse.in"
    />
    <meta name="author" content="Son Nguyen" />
    <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 property="fb:app_id" content="753617793197513" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <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>
    <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" />
    <script type="application/ld+json">
      {
        "@context": "https://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>