Merge pull request #64 from hoangsonww/homepage-enhancements

Enhanced Search Feature for Homepage
hoangsonww · Mar 3, 2024 · b64e550 · b64e550
2 parents f242a7e + 2e58f25
commit b64e550
Show file tree

Hide file tree

Showing 27 changed files with 76 additions and 149 deletions.
diff --git a/404.html b/404.html
@@ -249,8 +249,10 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <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>
+            <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>
+            </div>
             <div id="search-results" class="search-results"></div>
             <div class="buttons-container">
                 <button type="button" id="view-all-results" style="display: none;">View more results</button>

diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -2670,6 +2670,24 @@ body {
     margin: 0 auto;
 }
 
+#form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+}
+
+#search-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
 .search-result-card {
     display: flex;
     align-items: center;
@@ -2700,16 +2718,20 @@ body {
     margin-top: 10px;
 }
 
+.buttons-container button {
+    padding-left: 20px;
+}
+
 #clear-search {
     background-color: #7378c5;
     border: none;
     border-radius: 8px;
     font: inherit;
     cursor: pointer;
     color: #000000;
-    margin-right: 40px;
     padding: 5px 10px;
     margin-top: 10px;
+    margin-left: 20px;
 }
 
 #clear-search:hover {
@@ -2725,7 +2747,6 @@ body {
     font: inherit;
     cursor: pointer;
     color: #000000;
-    margin-right: 40px;
     margin-top: 10px;
 }
 

diff --git a/MovieVerse-Frontend/html/404.html b/MovieVerse-Frontend/html/404.html
@@ -249,13 +249,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
 
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>

diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
@@ -97,13 +97,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
         <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px">Movie Match</button>

diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
@@ -86,13 +86,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
     <div class="genres" style="margin-left: 25px">

diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
@@ -87,13 +87,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
         <button id="movie-match-btn3" style="bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>

diff --git a/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Frontend/html/api_fails.html
@@ -287,13 +287,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
 
         <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>

diff --git a/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Frontend/html/christopher-nolan.html
@@ -77,13 +77,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Frontend/html/create-account.html
@@ -138,14 +138,9 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1" style="margin-top: 19px">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+        <form id="form1">
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>

diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
@@ -91,13 +91,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Frontend/html/favorites.html
@@ -221,14 +221,9 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form" style="margin-top: 5px">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+        <form id="form1" style="margin-top: 5px">
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Frontend/html/feedback.html
@@ -345,13 +345,8 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
 
         <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>

diff --git a/MovieVerse-Frontend/html/inception.html b/MovieVerse-Frontend/html/inception.html
@@ -88,13 +88,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         </button>
 
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -76,14 +76,9 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
-        </form>1
+        </form>
     </header>
     <div class="genres" style="margin-left: 25px">
         <h2 id="search-title"></h2>

diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
@@ -92,13 +92,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Frontend/html/movie-match.html
@@ -90,13 +90,8 @@ <h1 id="my-heading">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
 

diff --git a/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Frontend/html/movie-timeline.html
@@ -91,13 +91,8 @@ <h1 id="my-heading">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
     </header>
     <div class="timeline-container">

diff --git a/MovieVerse-Frontend/html/offline.html b/MovieVerse-Frontend/html/offline.html
@@ -126,13 +126,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
 
         <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>

diff --git a/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Frontend/html/privacy-policy.html
@@ -116,13 +116,8 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
         <form id="form1">
-            <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
+            <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>
-            <div id="search-results" class="search-results"></div>
-            <div class="buttons-container">
-                <button type="button" id="view-all-results" style="display: none;">View more results</button>
-                <button type="button" id="clear-search" style="display: none">Clear</button>
-            </div>
         </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
         <button id="movie-match-btn3" style="bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>