Merge pull request #101 from hoangsonww/homepage-enhancements

Homepage Enhancements & Updated Frontend
hoangsonww · Mar 17, 2024 · 8a85981 · 8a85981
2 parents 45ac7d0 + 8df4c68
commit 8a85981
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 29 deletions.
diff --git a/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Frontend/css/trivia.css
@@ -474,6 +474,7 @@ header h1 {
     justify-content: center;
     position: relative;
     margin: 20px auto;
+    transition: stroke-dashoffset 0.5s ease-out;
 }
 
 .progress-circle::after {

diff --git a/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Frontend/html/movie-timeline.html
@@ -85,7 +85,7 @@
 </head>
 
 <body>
-    <header style="margin-bottom: -20px; margin-top: -5px">
+    <header style="margin-bottom: -20px; margin-top: -5px" id="homepage-header">
         <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: -34px" title="Click to go back to the home page">
             <h1 id="my-heading">
                 The Mo<span class="highlight">vieV</span>erse
@@ -133,15 +133,17 @@ <h1 id="my-heading">
         <div class="spinner"></div>
     </div>
 
-    <button id="settings-btn" style="position: fixed; bottom: 150px">Settings</button>
+    <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
 
-    <button id="movie-match-btn2" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
+    <button id="movie-match-btn2" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="position: fixed; bottom: 150px">Movie Match</button>
 
-    <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Recommendation</button>
+    <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="position: fixed; bottom: 115px">Recommendation</button>
 
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" title="Want to know more about movies? Chat with our intelligent chatbot!" style="margin-bottom: -55px">MovieVerse Chatbot</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" title="Want to know more about movies? Chat with our intelligent chatbot!" style="position: fixed; bottom: 80px">MovieVerse Chatbot</button>
 
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -50px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="position: fixed; bottom: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
+
+    <button id="back-to-top-btn" title="Go to top" style="position: fixed; bottom: 10px">Back to Top</button>
 
     <script src="../js/movie-timeline.js"></script>
 
@@ -172,6 +174,12 @@ <h1 id="my-heading">
                 }
             }
         });
+
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
     </script>
 
     <footer style="margin-top: 900px">

diff --git a/MovieVerse-Frontend/html/search.html b/MovieVerse-Frontend/html/search.html
@@ -71,7 +71,7 @@
 </head>
 
 <body>
-    <header style="margin-bottom: -50px; margin-top: -5px">
+    <header style="margin-bottom: -50px; margin-top: -5px" id="homepage-header">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
@@ -117,11 +117,12 @@ <h2 id="search-results-label">Search Results</h2>
         </div>
     </main>
 
-    <button id="settings-btn" style="position: fixed; bottom: 150px">Settings</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Recommendation</button>
-    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" title="Want to know more about movies? Chat with our intelligent chatbot!" style="margin-bottom: -55px">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -50px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
+    <button id="settings-btn" style="z-index: 10001; position: fixed; bottom: 185px">Settings</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="z-index: 10001; position: fixed; bottom: 150px">Movie Timeline</button>
+    <button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="z-index: 10001; position: fixed; bottom: 115px">Recommendation</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" title="Want to know more about movies? Chat with our intelligent chatbot!" style="z-index: 10001; position: fixed; bottom: 80px">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="z-index: 10001; position: fixed; bottom: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
+    <button id="back-to-top-btn" title="Go to top" style="position: fixed; bottom: 10px; z-index: 10001;">Back to Top</button>
 
     <script>
         const movieCode1 = {
@@ -142,6 +143,12 @@ <h2 id="search-results-label">Search Results</h2>
             return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
         }
 
+        document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+        });
+
         async function showMovieOfTheDay() {
             const year = new Date().getFullYear();
             const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;

diff --git a/MovieVerse-Frontend/html/settings.html b/MovieVerse-Frontend/html/settings.html
@@ -286,7 +286,7 @@ <h2>Change Text Color</h2>
             <input type="color" style="min-height: 50px" id="text-color-input">
         </div>
 
-        <!-- Additional Setting: Font Size -->
+        <!-- Font Size Setting -->
         <div class="settings-section">
             <h2>Change Font Size</h2>
             <label style="font: inherit" for="font-size-select">Font Size:</label>

diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
@@ -76,6 +76,19 @@
                 margin-top: 0;
             }
         }
+
+        body {
+            background-image: url("../../images/universe-1.png");
+            background-repeat: repeat-y;
+            background-size: 100% auto;
+        }
+
+        @media (max-width: 767px) {
+            body {
+                background-size: auto;
+                background-position: top center;
+            }
+        }
     </style>
 </head>
 

diff --git a/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Frontend/js/movie-timeline.js
@@ -1,4 +1,4 @@
-document.getElementById('load-movies').addEventListener('click', updateMovies);
+let alertShown = false;
 
 function showSpinner() {
     document.getElementById('myModal').classList.add('modal-visible');
@@ -255,12 +255,16 @@ function updateMovies() {
     let startYear = document.getElementById('start-year').value;
     let endYear = document.getElementById('end-year').value;
     let currentYear = new Date().getFullYear();
-    if (startYear && endYear && startYear <= endYear && endYear <= currentYear) {
+    if (startYear && endYear && startYear <= endYear && endYear <= currentYear && startYear >= 1900 && startYear <= currentYear) {
         fetchMoviesByTimePeriod(startYear, endYear);
         hideSpinner();
+        alertShown = false;
     }
     else {
-        alert('Please ensure the start year is before the end year, and both are not later than the current year.');
+        if (!alertShown) {
+            alert('Please ensure the start year is before the end year, the start year is later than the year 1900, and both are not later than the current year.');
+            alertShown = true;
+        }
         hideSpinner();
     }
 }
@@ -277,12 +281,12 @@ function showMovies(movies, mainElement) {
         const ratingClass = getClassByRate(movie.vote_average);
         movieEl.innerHTML = `
             ${movieImage}
-            <div class="movie-info">
-                <h3>${movie.title}</h3>
-                <span class="${ratingClass}">${voteAvg}</span>
+            <div class="movie-info" style="display: flex; justify-content: space-between; align-items: start; cursor: pointer;">
+                <h3 style="text-align: left; margin-right: 5px; flex: 1;">${movie.title}</h3>
+                <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
-            <div class="overview">
-                <h4>Movie Intro: </h4>
+            <div class="overview" style="cursor: pointer;">
+                <h4>Overview: </h4>
                 ${movie.overview}
             </div>`;
         movieEl.addEventListener('click', () => {
@@ -309,9 +313,10 @@ async function fetchMoviesByTimePeriod(startYear, endYear) {
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
-    const startYear = document.getElementById('start-year').value;
-    const endYear = document.getElementById('end-year').value;
-    fetchMoviesByTimePeriod(startYear, endYear);
+    showSpinner();
+    updateMovies();
+    alertShown = false;
+    hideSpinner();
 });
 
 function calculateMoviesToDisplay() {

diff --git a/MovieVerse-Frontend/js/quiz.js b/MovieVerse-Frontend/js/quiz.js
@@ -382,12 +382,22 @@ function calculateAndDisplayResults() {
 
 function displayResults(score) {
     let accuracy = (score / 10) * 100;
-    let progress = accuracy;
+    let progress = 0;
 
     document.getElementById('progress-circle').style.setProperty('--progress', `${progress}%`);
     document.getElementById('correct-answers').textContent = score;
     document.getElementById('result-text').textContent = `Your score is ${score} out of 10 (${accuracy.toFixed(1)}% accuracy)`;
 
+    const interval = setInterval(() => {
+        if (progress < accuracy) {
+            progress++;
+            document.getElementById('progress-circle').style.setProperty('--progress', `${progress}%`);
+        }
+        else {
+            clearInterval(interval);
+        }
+    }, 20);
+
     showModal();
 }
 
@@ -404,4 +414,4 @@ function showModal() {
             modal.style.display = "none";
         }
     });
-}
+}
diff --git a/MovieVerse-Frontend/js/search.js b/MovieVerse-Frontend/js/search.js
@@ -355,7 +355,7 @@ function showMovies(items, container, category) {
         let movieContentHTML = `<div class="image-container" style="text-align: center;">`;
 
         if (imagePath) {
-            movieContentHTML += `<img src="${imagePath}" alt="${title}" style="cursor: pointer; max-width: 100%; height: auto;" onError="this.parentElement.innerHTML = '<div style=\'text-align: center; padding: 20px;\'>Image Unavailable</div>';">`;
+            movieContentHTML += `<img src="${imagePath}" alt="${title}" style="cursor: pointer; max-width: 100%;" onError="this.parentElement.innerHTML = '<div style=\'text-align: center; padding: 20px;\'>Image Unavailable</div>';">`;
         }
         else {
             movieContentHTML += `<div style="text-align: center; padding: 20px;">Image Unavailable</div>`;

diff --git a/index.js b/index.js
@@ -91,7 +91,7 @@ function showMovies(movies, mainElement) {
                 <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
             <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
+                <h4>Overview: </h4>
                 ${overview}
             </div>`;
 
@@ -537,7 +537,7 @@ function showMoviesDirectorSpotlight(movies) {
                 <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
             <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
+                <h4>Overview: </h4>
                 ${movie.overview}
             </div>`;