Update: Enhanced app functionalities (#196)

hoangsonww · May 26, 2024 · c2b8674 · c2b8674
1 parent 93655bd
commit c2b8674
Show file tree

Hide file tree

Showing 136 changed files with 856 additions and 147 deletions.
diff --git a/404.html b/404.html
@@ -248,6 +248,7 @@
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -44,6 +44,124 @@ body {
     text-decoration: none;
 }
 
+.cast-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.cast-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.cast-image {
+    width: 100%;
+    height: 155px;
+    object-fit: fill;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.cast-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.cast-details {
+    width: 100%;
+}
+
+.actor-name, .actor-role {
+    font-size: 12px;
+    margin: 0;
+}
+
+.director-section {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.director-link {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.director-link .cast-image {
+    width: 100%;
+    height: 155px;
+    margin-bottom: 5px;
+}
+
+.director-link .actor-name {
+    font-size: 12px;
+}
+
+.creators-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    overflow: hidden !important;
+}
+
+.creator-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 115px;
+    margin: 5px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.creator-image {
+    width: 100%;
+    height: 155px;
+    object-fit: fill;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.creator-item:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.creator-details {
+    width: 100%;
+}
+
+.creator-name {
+    font-size: 12px;
+    margin: 0;
+    word-break: break-word;
+}
+
 #movie-match-btn {
     position: fixed;
     bottom: 220px;

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -852,6 +852,7 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
@@ -391,51 +391,51 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
     <div class="chart-container" style="margin-bottom: 250px">
         <div class="chart-box">
-            <h2 class="chart-title">Number of Movies Released Each Year</h2>
+            <h2 class="chart-title" id="chart-title1" style="cursor: pointer">Number of Movies Released Each Year</h2>
             <canvas id="chart1"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Popularity of Genres</h2>
+            <h2 class="chart-title" id="chart-title2" style="cursor: pointer">Popularity of Genres</h2>
             <canvas id="chart2"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Movies Distribution by Certification</h2>
+            <h2 class="chart-title" id="chart-title3" style="cursor: pointer">Movies Distribution by Certification</h2>
             <canvas id="chart3"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Average Movie Popularity Over Time</h2>
+            <h2 class="chart-title" id="chart-title4" style="cursor: pointer">Average Movie Popularity Over Time</h2>
             <canvas id="chart4"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Movies Count by Original Language</h2>
+            <h2 class="chart-title" id="chart-title5" style="cursor: pointer">Movies Count by Original Language</h2>
             <canvas id="chart5"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Average Vote Count by Genre</h2>
+            <h2 class="chart-title" id="chart-title6" style="cursor: pointer">Average Vote Count by Genre</h2>
             <canvas id="chart6"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Movie Releases by Month</h2>
+            <h2 class="chart-title" id="chart-title7" style="cursor: pointer">Movie Releases by Month</h2>
             <canvas id="chart7"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Movie Releases by Decades</h2>
+            <h2 class="chart-title" id="chart-title8" style="cursor: pointer">Movie Releases by Decades</h2>
             <canvas id="chart8"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Movie Releases by Countries</h2>
+            <h2 class="chart-title" id="chart-title9" style="cursor: pointer">Movie Releases by Countries</h2>
             <canvas id="chart9"></canvas>
         </div>
-        <div class="chart-box">
-            <h2 class="chart-title">Top Rated Movies per Year</h2>
+        <div class="chart-box" id="chart-title1">
+            <h2 class="chart-title" id="chart-title10" style="cursor: pointer">Top Rated Movies per Year</h2>
             <canvas id="chart11"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Total Movie Votes Over Years</h2>
+            <h2 class="chart-title" id="chart-title11" style="cursor: pointer">Total Movie Votes Over Years</h2>
             <canvas id="chartVotesOverYears"></canvas>
         </div>
         <div class="chart-box">
-            <h2 class="chart-title">Highly Rated Movies Over Years</h2>
+            <h2 class="chart-title" id="chart-title12" style="cursor: pointer">Highly Rated Movies Over Years</h2>
             <canvas id="chartHighlyRatedMovies"></canvas>
         </div>
     </div>

diff --git a/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Frontend/html/api_fails.html
@@ -232,6 +232,7 @@
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/chat.html b/MovieVerse-Frontend/html/chat.html
@@ -936,6 +936,7 @@ <h3>Recent & Suggested Chats</h3>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Frontend/html/create-account.html
@@ -946,6 +946,7 @@ <h2>Create Account</h2>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Frontend/html/feedback.html
@@ -299,6 +299,7 @@
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
@@ -343,14 +343,8 @@ <h3>Your Rating:</h3>
                 <span class="star" data-value="4" title="Good to know that this is a decent movie to watch">&#9733;</span>
                 <span class="star" data-value="5" title="Great to see that you're enjoying this movie! It'll be added to your favorites list">&#9733;</span>
             </div>
-            <span id="rating-value" style="margin-top: 10px"><strong>0.0/5.0</strong></span>
-        </div>
-
-        <!-- Right side for Description and Rating -->
-        <div class="movie-right" 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" style="margin-top: 75px">
+            <span id="rating-value" style="margin-top: 10px">0.0/5.0</span>
+            <div id="comments-section">
                 <h3>Movie Comments</h3>
                 <div id="comments-container"></div>
                 <!-- Toggle Buttons -->
@@ -379,9 +373,15 @@ <h3>Add a Comment for This Movie</h3>
                 </div>
             </div>
         </div>
+
+        <!-- Right side for Description and Rating -->
+        <div class="movie-right" style="position: relative; overflow: hidden">
+            <p id="movie-description" class="movie-description" style="margin-bottom: 290px; margin-top: -180px;"></p>
+            <h2 id="movie-rating" class="movie-rating"></h2>
+        </div>
     </div>
 
-    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: 50px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
+    <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px); margin-top: -20px" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
              style="display: block; width: 100%;"

diff --git a/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Frontend/html/notifications.html
@@ -1093,6 +1093,7 @@ <h2 style="cursor: pointer">Popular Directors</h2>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Frontend/html/reset-password.html
@@ -510,6 +510,7 @@ <h2>Reset Password</h2>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/search.html b/MovieVerse-Frontend/html/search.html
@@ -90,10 +90,6 @@
         #ad-container {
             display: block !important;
         }
-
-        #ad-container1 {
-            display: block !important;
-        }
     </style>
     <style>
         #translate_control {

diff --git a/MovieVerse-Frontend/html/settings.html b/MovieVerse-Frontend/html/settings.html
@@ -1043,6 +1043,7 @@ <h2>Change Font Size</h2>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Frontend/html/sign-in.html
@@ -829,6 +829,7 @@ <h2>Sign In</h2>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/support.html b/MovieVerse-Frontend/html/support.html
@@ -285,6 +285,7 @@
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }
 

diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
@@ -693,6 +693,7 @@ <h3>Trivia Results</h3>
                 clearInterval(statRotationInterval);
                 updateStatDisplay();
                 statRotationInterval = setInterval(updateStatDisplay, 3000);
+                localTimeDiv.scrollIntoView({ behavior: 'smooth' });
             });
         }