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

diff --git a/MovieVerse-Backend/.idea/workspace.xml b/MovieVerse-Backend/.idea/workspace.xml
diff --git a/MovieVerse-Frontend/README.md b/MovieVerse-Frontend/README.md
@@ -122,7 +122,7 @@ The tests directory contains a collection of test scripts and suites for the `Mo
 
 ## Getting Started
 
-To get started with MovieVerse:
+To get started with `MovieVerse-Frontend`:
 
 1. **Clone the repository**: Use Git to clone the app to your local machine:
     ```bash
@@ -140,12 +140,14 @@ To get started with MovieVerse:
     ```bash
     yarn install
     ```
-4. **Run the app**: Start the frontend server on your local server and navigate to the appropriate port to view it:
+4. **Run the app**: `cd` into the root directory then start the frontend server on your local server and navigate to the appropriate port to view it:
     ```bash
+    cd ..
     npm start
     ```
     Or using yarn:
      ```bash
+     cd ..
      yarn start
      ```
 5. **Explore the app**: Interact with the app's features, pages, and functionalities to get a feel for how it works.

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-
         <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
-
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
-
     <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
-
         <div id="button-container">
             <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
         </div>
-
         <ul style="overflow-y: auto">
             <li><a href="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
         <ul style="align-content: center; color: white">
             <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our other apps below, or visit my <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);

diff --git a/MovieVerse-Frontend/html/chat.html b/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>

diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);