Update: Enhanced app functionalities (#196)

hoangsonww · May 26, 2024 · 6ee9f9d · 6ee9f9d
1 parent b14fc7f
commit 6ee9f9d
Show file tree

Hide file tree

Showing 74 changed files with 3,684 additions and 1,109 deletions.
diff --git a/404.html b/404.html
@@ -461,7 +461,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <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>

diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -2,6 +2,10 @@
     box-sizing: border-box;
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 @font-face {
     font-family: 'Poppins';
     src: url('/fonts/Poppins-Light.ttf') format('truetype');
@@ -38,6 +42,7 @@ body {
     overflow-x: hidden;
     min-height: 100vh;
     overflow-y: auto;
+    scroll-behavior: smooth;
 }
 
 #heading-href {
@@ -3567,6 +3572,7 @@ body {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    padding: 10px;
 }
 
 #company-movies-list span {

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
@@ -179,6 +179,51 @@
         #actor-details-container {
             margin-top: 25px;
         }
+
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+
+        .movie-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;
+        }
+
+        .movie-details {
+            width: 100%;
+        }
+
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
     </style>
 </head>
 
@@ -259,11 +304,6 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
         </form>
     </header>
 
-    <div class="genres" style="margin-left: 25px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
     <main id="main" style="margin-left: 25px; height: 0"></main>
 
     <div class="details-container" id="actor-details-container" style="margin-bottom: 70px;">

diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
@@ -178,6 +178,51 @@
                 margin-top: 0 !important;
             }
         }
+
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+
+        .movie-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;
+        }
+
+        .movie-details {
+            width: 100%;
+        }
+
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
     </style>
 </head>
 
@@ -258,11 +303,6 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
         </form>
     </header>
 
-    <div class="genres" style="margin-left: 25px; margin-top: 5px">
-        <h2 id="search-title"></h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-    </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
@@ -284,8 +324,8 @@ <h2 id="company-name" class="company-header"></h2>
             <p><strong>Headquarters:</strong> <span id="company-headquarters"></span></p>
             <p><strong>Country:</strong> <span id="company-country"></span></p>
             <p><strong>Website:</strong> <a id="company-website" href="" target="_blank"></a></p>
-            <p><strong>Produced Movies:</strong></p>
-            <div id="company-movies-list" class="movies-list"></div>
+            <p style="text-align: center"><strong>Produced Movies:</strong></p>
+            <div style="text-align: center" id="company-movies-list" class="movies-list"></div>
         </div>
     </div>
 

diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
@@ -96,6 +96,51 @@
                 background-position: top center;
             }
         }
+
+        .movie-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            overflow: hidden !important;
+            margin-top: 7px;
+            padding-top: 5px;
+        }
+
+        .movie-item {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            width: 115px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .movie-image {
+            width: 100%;
+            height: 155px;
+            object-fit: fill;
+            border-radius: 5px;
+            margin-bottom: 5px;
+        }
+
+        .movie-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;
+        }
+
+        .movie-details {
+            width: 100%;
+        }
+
+        .movie-title {
+            font-size: 12px;
+            margin: 0;
+            word-break: break-word;
+        }
     </style>
     <style>
         #translate_control {

diff --git a/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Frontend/js/actor-details.js
@@ -97,8 +97,6 @@ document.addEventListener('DOMContentLoaded', () => {
     else {
         fetchActorDetails(2037);
     }
-
-    document.getElementById('clear-search-btn').style.display = 'none';
 });
 
 async function fetchActorDetails(actorId) {
@@ -193,15 +191,45 @@ async function populateActorDetails(actor, credits) {
 
     const movieList = document.createElement('div');
     movieList.classList.add('movie-list');
+    movieList.style.display = 'flex';
+    movieList.style.flexWrap = 'wrap';
+    movieList.style.justifyContent = 'center';
+    movieList.style.gap = '10px';
 
     credits.cast.forEach((movie, index) => {
-        const movieLink = document.createElement('span');
-        movieLink.textContent = movie.title;
+        const movieLink = document.createElement('a');
         movieLink.classList.add('movie-link');
-        movieLink.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        });
+        movieLink.href = 'javascript:void(0);';
+        movieLink.setAttribute('onclick', `selectMovieId(${movie.id});`);
+
+        const movieItem = document.createElement('div');
+        movieItem.classList.add('movie-item');
+
+        const movieImage = document.createElement('img');
+        movieImage.classList.add('movie-image');
+
+        if (movie.poster_path) {
+            movieImage.src = IMGPATH + movie.poster_path;
+            movieImage.alt = `${movie.title} Poster`;
+        } else {
+            movieImage.alt = 'Image Not Available';
+            movieImage.src = '../../images/movie-default.jpg';
+            movieImage.style.filter = 'grayscale(100%)';
+            movieImage.style.objectFit = 'cover';
+        }
+
+        movieItem.appendChild(movieImage);
+
+        const movieDetails = document.createElement('div');
+        movieDetails.classList.add('movie-details');
+
+        const movieTitle = document.createElement('p');
+        movieTitle.classList.add('movie-title');
+        movieTitle.textContent = movie.title;
+        movieDetails.appendChild(movieTitle);
+
+        movieItem.appendChild(movieDetails);
+        movieLink.appendChild(movieItem);
         movieList.appendChild(movieLink);
 
         if (index < credits.cast.length - 1) {
@@ -357,6 +385,11 @@ async function populateActorDetails(actor, credits) {
     applySettings();
 }
 
+function selectMovieId(movieId) {
+    localStorage.setItem('selectedMovieId', movieId);
+    window.location.href = 'movie-details.html';
+}
+
 function calculateAge(birthday, deathday = null) {
     const birthDate = new Date(birthday);
     const referenceDate = deathday ? new Date(deathday) : new Date();