Merge pull request #55 from adipai/ui-branch

ui improvements
adipai · Oct 18, 2023 · d55adc9 · d55adc9
2 parents 90416de + 1796d71
commit d55adc9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/src/recommenderapp/static/script.js b/src/recommenderapp/static/script.js
@@ -1,4 +1,5 @@
 $(document).ready(function () {
+
   $(function () {
     $("#searchBox").autocomplete({
       source: function (request, response) {
@@ -41,6 +42,8 @@ $(document).ready(function () {
   });
 
   $("#predict").click(function () {
+    $("#loader").attr("class", "d-flex justify-content-center");
+
     var movie_list = [];
 
     $("#selectedMovies li").each(function () {
@@ -94,20 +97,34 @@ $(document).ready(function () {
           ulList.append(fieldset);
           i += 1;
         });
-
-        // var li = $('<li/>').text()
+        $("#loader").attr("class", "d-none");
         console.log("->", response["recommendations"]);
       },
       error: function (error) {
         console.log("ERROR ->" + error);
+        $("#loader").attr("class", "d-none");
       },
     });
   });
 
+  window.addEventListener("popstate", function (event) {
+    // Check if the user is navigating back
+    if (event.state && event.state.page === "redirect") {
+      // Redirect the user to a specific URL
+      window.location.href = "/";
+      location.reload();
+    }
+  });
+
   // Function to handle Get Started button click
   function getStarted() {
     // Navigate to the search page
-    window.location.href = "/search_page"; // Replace with the actual URL of your search page
+    $("#loaderLanding").attr("class", "d-flex justify-content-center");
+    $("#centralDivLanding").hide();
+    $('#landingTopNav').hide();
+    setTimeout(function() {
+      window.location.href = "/search_page"; // Replace with the actual URL of your search page
+    }, 2000);
   }
 
   // Bind the getStarted function to the Get Started button click

diff --git a/src/recommenderapp/static/stylesheet.css b/src/recommenderapp/static/stylesheet.css
@@ -1,9 +1,14 @@
+
 .landing-page {
   background-image: url("image.jpg");
   background-size: cover;
   color: azure !important;
 }
 
+.table {
+  color: white !important;
+}
+
 .highlighted-section {
   background-color: black;
   color: white;
@@ -16,7 +21,7 @@
 }
 
 body {
-  background-image: url("224299.jpg");
+  background-image: url("image.jpg");
   background-size: cover;
   color: azure !important;
 }

diff --git a/src/recommenderapp/templates/landing_page.html b/src/recommenderapp/templates/landing_page.html
@@ -13,7 +13,7 @@
   </head>
 
   <body class="landing-page"> 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top" id="landingTopNav">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">PopcornPicks🍿</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -22,7 +22,7 @@
       </div>
     </nav>
 
-    <div class="container" style="margin-top: 60px;">
+    <div class="container" style="margin-top: 60px;" id="centralDivLanding">
       <div class="heading1"><br><br><br><br>
         <h2><center>🎬 PopcornPicks: Pick a Movie! 🎬</center></h2>
         <p style="text-align: center; color: azure; font-size: 18px;"><br>
@@ -39,6 +39,11 @@ <h2><center>🎬 PopcornPicks: Pick a Movie! 🎬</center></h2>
         </div>
       </div>
     </div>
+    <div class="d-none" id="loaderLanding">
+      <div class="spinner-border" role="status">
+        <span class="sr-only"></span>
+      </div>
+    </div>
 
   </body>
 

diff --git a/src/recommenderapp/templates/search_page.html b/src/recommenderapp/templates/search_page.html
@@ -67,6 +67,11 @@ <h2>Recommended Movies:</h2>
         </div>
       </div>
     </div>
+    <div class="d-none" id="loader">
+      <div class="spinner-border" role="status">
+        <span class="sr-only"></span>
+      </div>
+    </div>
     <div class="container" style="margin-top: 20px;">
       <div class="row">
         <div class="col-md-12">