Update: Enhanced app functionalities (#196)

MovieVerse-Frontend/css/trivia.css

@@ -962,6 +962,88 @@ main {
     background-color: #ff8623;
 }
 
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 @media (max-width: 900px) {
     #profileBtn {
         display: none;

MovieVerse-Frontend/html/about.html

@@ -169,6 +169,23 @@
                 bottom: 70px;
             }
         }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -221,7 +238,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" 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>
@@ -264,10 +281,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
 
@@ -285,10 +302,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="#subheading4">Useful Links</a></li>
             <li><a href="terms-of-service.html">Terms of Service</a></li>
             <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
             <li><a href="sign-in.html">Sign In</a></li>
             <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
 

MovieVerse-Frontend/html/actor-details.html

@@ -230,7 +230,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </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>

MovieVerse-Frontend/html/analytics.html

@@ -309,7 +309,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <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>
@@ -351,7 +351,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu

MovieVerse-Frontend/html/api_fails.html

@@ -483,7 +483,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </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>
@@ -560,19 +560,6 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -581,7 +568,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
@@ -1075,4 +1062,4 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
 </body>
 
-</html>
+</html>

MovieVerse-Frontend/html/chat.html

@@ -491,7 +491,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" 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>

MovieVerse-Frontend/html/chatbot.html

@@ -192,6 +192,10 @@
             background-color: #f4f4f4 !important;
         }
 
+        #homepage-header {
+            margin-top: -10px;
+        }
+
         @media (max-width: 767px) {
             #google_translate_element {
                 bottom: 120px;
@@ -200,6 +204,10 @@
             #translate_control {
                 bottom: 70px;
             }
+
+            #homepage-header {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -246,13 +254,18 @@
             }, { passive: true });
         })
     </script>
-    <header style="margin-top: 10px !important;">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
 
+        <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>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -268,7 +281,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>

MovieVerse-Frontend/html/christopher-nolan.html

@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </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>

MovieVerse-Frontend/html/company-details.html

@@ -229,7 +229,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </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>

MovieVerse-Frontend/html/create-account.html

@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" 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>

MovieVerse-Frontend/html/director-details.html

@@ -223,7 +223,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </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>