Fix: Fixed UI layout (#100)

hoangsonww · Mar 17, 2024 · 8df4c68 · 8df4c68
1 parent e5f8524
commit 8df4c68
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 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; z-index: 10001">Settings</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 10001">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">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; margin-bottom: -55px">MovieVerse Chatbot</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="z-index: 10001; 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/js/movie-timeline.js b/MovieVerse-Frontend/js/movie-timeline.js
@@ -313,8 +313,10 @@ async function fetchMoviesByTimePeriod(startYear, endYear) {
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
+    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";
         }
     });
-}
+}