Merge pull request #195 from hoangsonww/main-deployment-branch

Main deployment branch

.github/README.md

@@ -12,8 +12,6 @@ Welcome to **The MovieVerse** - your digital compass to the cinematic universe.
 
 **This app is currently available at [movie-verse.com](https://movie-verse.com).**
 
----
-
 ## Table of Contents
 
 - [User Interface](#user-interface)

.github/SECURITY.md

@@ -3,7 +3,7 @@
 ## Introduction
 The MovieVerse is a dynamic web application designed to provide users with an engaging platform to explore and learn about various movies, directors, actors, and more. Ensuring the security of our users and the application is of paramount importance. This document outlines the security measures, policies, and best practices implemented in The MovieVerse.
 
-Current MovieVerse Version: `1.1.2`
+Current MovieVerse Version: `2.1.2`
 
 ## Security Measures
 

MovieVerse-Backend/crawler/datasources.py

@@ -27,11 +27,7 @@
     'https://www.the-numbers.com/movie/weekly-per-theater-chart',
     'https://www.the-numbers.com/movie/theater-count',
     'https://www.the-numbers.com/movie/market',
-    'https://www.the-numbers.com/movie/production-countries',
-    'https://www.the-numbers.com/movie/production-method',
-    'https://www.the-numbers.com/movie/source',
     'https://www.the-numbers.com/movie/production-status',
-    'https://www.the-numbers.com/movie/production-countries',
     'https://www.the-numbers.com/movie/languages',
     'https://www.the-numbers.com/movie/certifications',
     'https://www.the-numbers.com/movie/mpaa-ratings',
@@ -50,8 +46,6 @@
     'https://www.the-numbers.com/movie/genres',
     'https://www.the-numbers.com/movie/franchises',
     'https://www.the-numbers.com/movie/creative-type',
-    'https://www.the-numbers.com/movie/production-method',
-    'https://www.the-numbers.com/movie/source',
 ]
 
 def fetch_from_sources():

MovieVerse-Frontend/README.md

@@ -90,7 +90,7 @@ Please note that it is currently under development, and the components may under
 
 ### Tests Directory - `tests`
 
-The tests directory contains a collection of test scripts for the MovieVerse application. These tests are designed to ensure that the app's functionality is working as expected and to identify any potential issues or bugs.
+The tests directory contains a collection of test scripts and suites for the `MovieVerse` application. These tests are designed to ensure that the app's functionality is working as expected and to identify any potential issues or bugs.
 
 - `apiTests.js`: Tests for the API functionality
 - `chatbotInteractionTests.js`: Tests for the chatbot interaction

MovieVerse-Frontend/css/style.css

@@ -456,6 +456,14 @@ header h1 {
     color: #ff8623;
 }
 
+.highlight2 {
+    color: orange;
+}
+
+.highlight2:hover {
+    color: #ff8623;
+}
+
 .search:focus {
     outline: none;
     background-color: #22254b;
@@ -521,11 +529,6 @@ header h1 {
     background-position: center;
 }
 
-.movie-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
 .tvSeries-info {
     padding: 20px;
     flex-grow: 1;
@@ -651,10 +654,6 @@ header h1 {
     visibility: hidden;
 }
 
-.movie-info h3 {
-    margin: 0;
-}
-
 .tvSeries-info h3 {
     margin: 0;
 }
@@ -777,6 +776,45 @@ header h1 {
     margin-left: 40px;
 }
 
+#my-heading1 {
+    color: #ff8623;
+    padding: 10px;
+    font-size: 36px;
+    text-align: center;
+    background-color: transparent;
+    margin-left: 40px;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#my-heading {
+    margin-bottom: -25px;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards;
+}
+
+#my-heading a {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.highlight {
+    display: inline-block;
+    opacity: 0;
+    animation: fadeInUp 1s ease forwards 0.5s;
+}
+
 #trivia-btn {
     position: fixed;
     bottom: 60px;
@@ -3022,6 +3060,7 @@ canvas {
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
     padding-top: 14px;
+    flex-grow: 1;
 }
 
 .tvSeries-info {
@@ -3579,7 +3618,6 @@ body {
     padding: 10px;
     border-radius: 8px;
     background-color: #7378c5;
-    margin: 0;
     margin-bottom: 2px;
     margin-top: 5px;
     width: 300px;
@@ -3735,7 +3773,6 @@ footer {
         right: 12.5px;
     }
 
-
     .notification-btn {
         right: 12.5px;
     }
@@ -3771,3 +3808,46 @@ footer {
     padding: 20px;
     margin: 20px 0;
 }
+
+@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;
+}

MovieVerse-Frontend/html/about.html

@@ -295,13 +295,13 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
     <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>150,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
+        <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>
+        <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>
 

MovieVerse-Frontend/html/analytics.html

@@ -92,6 +92,36 @@
                 background-position: top center;
             }
         }
+
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards;
+        }
+
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: fadeInUp 1s ease forwards 0.5s;
+        }
     </style>
     <style>
         #translate_control {
@@ -168,6 +198,65 @@
                 bottom: 70px;
             }
         }
+
+        @keyframes dropIn {
+            0% {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #my-heading {
+            margin-bottom: -25px;
+            opacity: 0;
+            animation: dropIn 1s ease forwards;
+        }
+
+        #my-heading a {
+            text-decoration: none;
+            color: inherit;
+            cursor: pointer;
+            display: inline-block;
+        }
+
+        .highlight {
+            display: inline-block;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1s;
+        }
+
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -264,8 +353,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
     <nav id="side-nav" class="side-nav" style="z-index: 1002;">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <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>
 

MovieVerse-Frontend/html/movie-details.html

@@ -316,7 +316,6 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
 
     <div class="genres" id="genresDiv" style="margin-left: 25px; margin-top: 25px; display: none; height: 0">
         <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
     </div>
 
     <main id="main" style="margin-left: 35px; height: 0"></main>
@@ -335,7 +334,7 @@ <h2 id="movie-title" class="movie-header"></h2>
                     ❤️
                 </button>
             </div>
-            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002"/>
+            <img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
             <h3>Your Rating:</h3>
             <div class="rating" title="Click on a star to rate this movie!">
                 <span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
@@ -348,10 +347,10 @@ <h3>Your Rating:</h3>
         </div>
 
         <!-- Right side for Description and Rating -->
-        <div class="movie-right" style="margin-top: -50px">
-            <p id="movie-description" class="movie-description"></p>
+        <div class="movie-right" style="margin-top: -15px">
+            <p id="movie-description" class="movie-description" style="margin-top: -60px"></p>
             <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
+            <div id="comments-section" style="margin-top: 75px">
                 <h3>Movie Comments</h3>
                 <div id="comments-container"></div>
                 <!-- Toggle Buttons -->
@@ -952,11 +951,13 @@ <h3>Add a Comment for This Movie</h3>
         let isTrailerOpen = false;
 
         document.getElementById('movie-image').addEventListener('click', function() {
-            document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            if (document.getElementById('trailerButton')) {
+                document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            }
 
-            const imageUrl = this.src;
-            const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+            let imageUrl = this.src.replace('w780', 'w1280');
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);