Fix: Fixed UI layout (#100)

hoangsonww · Mar 18, 2024 · 89e1701 · 89e1701
1 parent 8df4c68
commit 89e1701
Show file tree

Hide file tree

Showing 22 changed files with 217 additions and 91 deletions.
diff --git a/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Frontend/css/trivia.css
@@ -734,8 +734,3 @@ footer {
     background-color: #7378c5;
     color: white !important;
 }
-
-footer p:hover {
-    transition: 0.1s ease-in;
-    color: #ff8623;
-}
diff --git a/MovieVerse-Frontend/html/settings.html b/MovieVerse-Frontend/html/settings.html
@@ -79,10 +79,9 @@
         }
 
         body {
-            background-image: url("images/universe-1.png");
+            background-image: url("../../images/universe-1.png");
             background-repeat: repeat-y;
             background-size: 100% auto;
-            overflow: auto;
         }
 
         @media (max-width: 767px) {

diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
@@ -189,7 +189,7 @@ <h3>Trivia Results</h3>
 
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
-            <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
+            <p style="cursor: pointer; color: white; text-decoration: none">© 2024 The MovieVerse. All rights reserved.</p>
         </a>
     </footer>
 </body>

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css
@@ -1307,7 +1307,6 @@ p {
     color: white;
     cursor: pointer;
     font-size: 1.5rem;
-    position: absolute;
     top: 5px;
     left: 15px;
     border-radius: 8px;
@@ -1317,6 +1316,7 @@ p {
     line-height: 32px;
     text-align: center;
     display: flex;
+    position: fixed;
     justify-content: center;
     align-items: center;
     padding-left: 4.25px;
@@ -1900,10 +1900,6 @@ canvas {
         display: none;
     }
 
-    .movie-details-body4 {
-        background-image: url("../../images/black.jpeg");
-    }
-
     #indexLink {
         margin-bottom: -15px;
     }

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/www/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 {
@@ -733,8 +734,3 @@ footer {
     background-color: #7378c5;
     color: white !important;
 }
-
-footer p:hover {
-    transition: 0.1s ease-in;
-    color: #ff8623;
-}
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
@@ -71,7 +71,7 @@
     </style>
 </head>
 
-<body class="movie-details-body4">
+<body>
     <header style="margin-top: -5px">
         <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">
@@ -495,18 +495,7 @@ <h3 id="subheading">Useful Links:</h3>
             window.location.href = 'search.html';
         }
 
-        function setBodyClass() {
-            if (window.innerWidth < 768) {
-                document.body.classList.remove('movie-details-body');
-                document.body.classList.add('movie-details-body4');
-            }
-            else {
-                document.body.classList.remove('movie-details-body4');
-                document.body.classList.add('movie-details-body');
-            }
-        }
 
-        window.addEventListener('resize', setBodyClass);
     </script>
 
 </body>

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
@@ -58,9 +58,22 @@
                 margin-right: 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>
-<body class="movie-details-body">
+<body>
     <header id="homepage-header" style="margin-top: -5px">
         <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0">
             <h1 id="my-heading" style="margin-bottom: -10px">

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
@@ -181,6 +181,19 @@
                 margin-right: 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>
     <script type="text/javascript">
         (function(c,l,a,r,i,t,y){
@@ -191,7 +204,7 @@
     </script>
 </head>
 
-<body class="movie-details-body">
+<body>
     <header style="margin-bottom: -30px; padding-top: 19px">
         <div id="header-title">
             <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html
@@ -368,8 +368,8 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
             <textarea id="message" name="message" placeholder="Your Feedback" required></textarea>
             <button type="submit">Send Feedback</button>
             <p style="color: black">Need immediate assistance? Submit a support request using the link below and we'll get back to you as soon as possible.</p>
-            <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
         </form>
+        <button id="supportBtn" onclick="window.location.href='support.html'">Request Support</button>
     </div>
 
     <script>

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
@@ -44,6 +44,19 @@
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
     <style>
+        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;
+            }
+        }
+
         #comment-modal .modal-content {
             min-width: 400px;
             margin-top: 0;
@@ -68,7 +81,7 @@
     </script>
 </head>
 
-<body class="movie-details-body">
+<body>
     <header style="margin-bottom: -60px; margin-top: -5px">
         <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">

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -61,6 +61,19 @@
         #local-time {
             transform: translateX(20%);
         }
+
+        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>
     <script type="text/javascript">
         (function(c,l,a,r,i,t,y){
@@ -71,8 +84,8 @@
     </script>
 </head>
 
-<body class="movie-details-body">
-    <header style="margin-bottom: -20px; margin-top: -5px">
+<body>
+    <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
@@ -110,7 +123,7 @@ <h1 id="my-heading">
             <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
         </div>
         <div class="center-container1">
-            <main id="search-results">
+            <main id="results">
                 <!-- Movies will be dynamically loaded here -->
             </main>
         </div>
@@ -120,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>
 
@@ -159,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-Mobile/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
@@ -54,11 +54,24 @@
         #local-time {
             transform: translateX(15%);
         }
+
+        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>
 
-<body class="movie-details-body4">
-    <header style="margin-bottom: -50px; margin-top: -5px">
+<body>
+    <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
@@ -100,16 +113,16 @@ <h2 id="search-results-label">Search Results</h2>
         </div>
 
         <div id="movie-match-container1" class="movie-match-container1">
-            <main id="results">
-            </main>
+            <main id="results"></main>
         </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 = {
@@ -130,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`;