Fix: Updated search UI (#31)

hoangsonww · Feb 23, 2024 · 01484d4 · 01484d4
1 parent 1b16350
commit 01484d4
Show file tree

Hide file tree

Showing 27 changed files with 122 additions and 244 deletions.
diff --git a/404.html b/404.html
@@ -224,12 +224,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
 

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -80,12 +80,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
@@ -65,12 +65,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
@@ -67,12 +67,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>

diff --git a/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Frontend/html/chatbot.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 
 <head>
@@ -71,96 +70,96 @@
 </head>
 
 <body>
-    <header id="header">
-        <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">
-                <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 10px">
-                    The Mo<span class="highlight">vieV</span>erse
-                </h1>
-            </a>
-        </div>
-
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
-            <p id="stats-label" class="clock" style="font-size: 16px"></p>
-            <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
-        </div>
-
-        <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
-        <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
-
-        <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
-            <span id="signInOutText">Sign In</span>
-            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
-            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
-        </button>
-
-        <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
-            <span id="profileText">Profile</span>
-            <i class="fas fa-user" id="profileIcon"></i>
-        </button>
-
-        <div id="search-container" style="margin-top: 10px">
-            <form id="form">
-                <input type="text" id="search" placeholder="Search For Anything..." class="search" />
-                <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-            </form>
-        </div>
-    </header>
-
-    <div id="bot-header">
-        <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
-        <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
-        <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics or questions!</h4>
+<header id="header">
+    <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">
+            <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 10px">
+                The Mo<span class="highlight">vieV</span>erse
+            </h1>
+        </a>
     </div>
 
-    <main id="main">
-        <div id="chatbotContainer">
-            <div id="chatbotHeader">The MovieVerse Assistant</div>
-            <div id="chatbotBody"></div>
-            <input id="chatbotInput" type="text" placeholder="Ask me about anything...">
-            <button id="sendButton">Send</button>
-        </div>
-    </main>
+    <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <p id="stats-label" class="clock" style="font-size: 16px"></p>
+        <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
+    </div>
 
-    <button id="alt-home-btn" onclick="window.location.href='../../index.html'">Home</button>
-    <button id="settings-btn" style="position: fixed; bottom: 150px">Settings</button>
-    <button id="movie-match-btn2" onclick="window.location.href='movie-match.html'" style="bottom: 115px" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
-    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 80px">Movie Timeline</button>
-    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 45px">Recommendation</button>
-    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px">MovieVerse Trivia</button>
+    <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
+    <button class="about" onclick="window.location.href='about.html'">About</button>
+    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+
+    <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+        <span id="signInOutText">Sign In</span>
+        <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+        <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+    </button>
+
+    <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+        <span id="profileText">Profile</span>
+        <i class="fas fa-user" id="profileIcon"></i>
+    </button>
+
+    <div id="search-container" style="margin-top: 10px">
+        <form id="form">
+            <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>
+        </form>
+    </div>
+</header>
+
+<div id="bot-header">
+    <h2 id="search-title">The <span class="highlight1">MovieVerse</span> Assistant</h2>
+    <button id="clear-search-btn" style="display: none;">Clear Search Results</button>
+    <h4 id="alt-title">Dive deep into the movie world with our expert assistant</h4>
+</div>
+
+<main id="main">
+    <div id="chatbotContainer">
+        <div id="chatbotHeader">The MovieVerse Assistant</div>
+        <div id="chatbotBody"></div>
+        <input id="chatbotInput" type="text" placeholder="Ask me about anything..." title="Type your message here"/>
+        <button id="sendButton" title="Send this message">Send</button>
+    </div>
+</main>
 
-    <script src="../js/chatbot.js"></script>
+<button id="alt-home-btn" onclick="window.location.href='../../index.html'">Home</button>
+<button id="settings-btn" style="position: fixed; bottom: 150px">Settings</button>
+<button id="movie-match-btn2" onclick="window.location.href='movie-match.html'" style="bottom: 115px" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
+<button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 80px">Movie Timeline</button>
+<button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 45px">Recommendation</button>
+<button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px">MovieVerse Trivia</button>
 
-    <script>
-        document.getElementById('settings-btn').addEventListener('click', () => {
-            window.location.href = 'settings.html';
-        });
-
-        document.addEventListener('DOMContentLoaded', () => {
-            applySettings();
-
-            function applySettings() {
-                const savedBg = localStorage.getItem('backgroundImage');
-                const savedTextColor = localStorage.getItem('textColor');
-                const savedFontSize = localStorage.getItem('fontSize');
-
-
-                if (savedBg) {
-                    document.body.style.backgroundImage = `url('${savedBg}')`;
-                }
-                if (savedTextColor) {
-                    document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
-                        element.style.color = savedTextColor;
-                    });
-                }
-                if (savedFontSize) {
-                    const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
-                    document.body.style.fontSize = size;
-                }
+<script src="../js/chatbot.js"></script>
+
+<script>
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const savedBg = localStorage.getItem('backgroundImage');
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+
+
+            if (savedBg) {
+                document.body.style.backgroundImage = `url('${savedBg}')`;
             }
-        });
-    </script>
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+</script>
 </body>
 
-</html>
+</html>
diff --git a/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Frontend/html/christopher-nolan.html
@@ -68,12 +68,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
@@ -69,12 +69,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Frontend/html/create-account.html
@@ -123,12 +123,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1" style="margin-top: 19px">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>

diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
@@ -67,12 +67,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Frontend/html/favorites.html
@@ -204,12 +204,7 @@ <h1 id="stats-display" class="clock"></h1>
         </button>
 
         <form id="form" style="margin-top: 5px">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/inception.html b/MovieVerse-Frontend/html/inception.html
@@ -74,12 +74,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -67,12 +67,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
@@ -74,12 +74,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Frontend/html/movie-match.html
@@ -67,12 +67,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" style="margin-top: -1px"/>
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Frontend/html/movie-timeline.html
@@ -66,12 +66,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search For Anything..."
-                    class="search"
-            />
+            <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>
         </form>
     </header>

diff --git a/MovieVerse-Frontend/html/offline.html b/MovieVerse-Frontend/html/offline.html
@@ -262,12 +262,7 @@ <h1 id="stats-display" class="clock"></h1>
         <i class="fas fa-user" id="profileIcon"></i>
     </button>
     <form id="form1">
-        <input
-                type="text"
-                id="search"
-                placeholder="Search For Anything..."
-                class="search"
-        />
+        <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>
     </form>