Fix a lot of UI issues on Guest home page

src/main/java/Controllers/HomeController.java

@@ -104,12 +104,11 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
         request.setAttribute("foodList", foodList);
 
         List<String> imgURLList = new ArrayList<>();
-        imgURLList.add("assets/img/gallery/com_tam.jpg");
-        imgURLList.add("assets/img/gallery/noodles.png");
-        imgURLList.add("assets/img/gallery/sub-sandwich.png");
-        imgURLList.add("assets/img/gallery/junk_food.jpg");
-        imgURLList.add("assets/img/gallery/dessert.jpg");
-        imgURLList.add("assets/img/gallery/drinks.jpg");
+        String baseURL = "assets/img/gallery/";
+        int numOfImages = 10;
+        for (int i = 1; i <= numOfImages; i++) {
+          imgURLList.add(baseURL + i + ".jpg");
+        }
 
         FoodTypeDAO dao1 = new FoodTypeDAO();
         ResultSet rs1 = dao1.getAllFoodType();
@@ -122,7 +121,7 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
             }
         } catch (Exception e) {
         }
-        for (int i = 0; i < 6; i++) {
+        for (int i = 0; i < numOfImages; i++) {
             foodTypeList.get(i).setImgURL(imgURLList.get(i));
         }
         request.setAttribute("foodTypeList", foodTypeList);

src/main/webapp/WEB-INF/jspf/common/components/footer.jspf

@@ -2,14 +2,14 @@
 <%@ page pageEncoding="UTF-8" %>
 <section class="py-0 pt-4 bg-1000">
     <div class="container">
-        <div class="row">
-            <div class="col-6 col-md-4 col-lg-3 col-xxl-3 mb-3">
+        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
+            <div class="mb-3">
                 <h5 class="lh-lg fw-bold text-white">THÔNG TIN CHUNG</h5>
                 <ul class="list-unstyled mb-md-4 mb-lg-0">
                     <li class="lh-lg"><a class="text-200 text-decoration-none" href="https://github.com/khengyun/FFood-shop">Về chúng tôi</a></li>
                 </ul>
             </div>
-            <div class="col-6 col-md-4 col-lg-3 col-xxl-3 col-lg-3 mb-3">
+            <div class="mb-3">
                 <h5 class="lh-lg fw-bold text-white">LIÊN HỆ</h5>
                 <ul class="list-unstyled mb-md-4 mb-lg-0">
                     <li class="lh-lg text-200 text-decoration-none">
@@ -19,8 +19,9 @@
 
                     </li>
                     <li class="lh-lg text-200 text-decoration-none">
+                        <!-- ZeroWidthSpace characters help break the email if the email is too long -->
                         <a href="mailto:ffood.shop.cantho@gmail.com" class="navbar-sm-brand text-light text-decoration-none">
-                            Email: ffood.shop.cantho@gmail.com
+                            Email: &#8203;ffood.shop.cantho@&#8203;gmail.com
                         </a>
                     </li>
                     <li class="lh-lg text-200 text-decoration-none">
@@ -30,13 +31,13 @@
                     </li>
                 </ul>
             </div>
-            <div class="col-6 col-md-4 col-lg-3 col-xxl-3 mb-3">
+            <div class="mb-3">
                 <h5 class="lh-lg fw-bold text-white">CÁC CHÍNH SÁCH</h5>
                 <ul class="list-unstyled mb-md-4 mb-lg-0">
                     <li class="lh-lg"><a class="text-200 text-decoration-none" href="https://github.com/tien-thanh-hua/FFood">Điều khoản &amp; Chính sách</a></li>
                 </ul>
             </div>
-            <div class="col-6 col-md-4 col-lg-3 col-xxl-3 mb-3">
+            <div class="mb-3">
                 <h5 class="lh-lg fw-bold text-white">HÃY THEO DÕI CHÚNG TÔI</h5>
                 <div class="text-start my-3"> 
                     <a class="text-500" href="https://github.com/khengyun/FFood-shop" target="_blank">

src/main/webapp/WEB-INF/jspf/common/components/header.jspf

@@ -6,14 +6,19 @@
 <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block">
     <div class="container text-light">
         <div class="w-100 d-flex justify-content-between">
-            <div>
-                <i class="fa fa-envelope mx-2"></i>
+            <div class="d-flex align-items-center">
+                <i class="ph-fill ph-envelope mx-2"></i>
                 <a href="mailto:ffood.shop.cantho@gmail.com" class="navbar-sm-brand text-light text-decoration-none">
                     ffood.shop.cantho@gmail.com
                 </a>
             </div>
-            <div>
-                <i class="fa fa-phone mx-2"></i>
+            <div class="flex-grow-1"></div>
+
+            <!-- Language button -->
+            <%@ include file="../../hyperfeat/langviewbutton.jspf" %>
+
+            <div class="d-flex align-items-center">
+                <i class="ph-fill ph-phone mx-2"></i>
                 <a href="tel:0914-875-606" class="navbar-sm-brand text-light text-decoration-none">
                     0914-875-606
                 </a>
@@ -25,62 +30,81 @@
 <nav class="navbar navbar-expand-lg navbar-light shadow bg-light sticky-top"
      data-navbar-on-scroll="data-navbar-on-scroll">
     <div class="container">
-        <a class="navbar-brand d-inline-flex" href="/">
+        <a class="navbar-brand d-inline-flex me-0" href="/">
             <img class="d-inline-block" src="<%= request.getContextPath() + " assets/img/gallery/logo.svg"%>"
                  alt="logo"/>
-            <span class="text-1000 fs-3 fw-bold ms-2 text-gradient">FFood</span>
+            <span class="text-1000 fs-3 fw-bold ms-2 text-gradient notranslate">FFood</span>
         </a>
+        <div class="flex-grow-1"></div>
+
+        <div class="d-none d-md-flex d-lg-none align-items-center">
+          <!-- Language button -->
+          <%@ include file="../../hyperfeat/langviewbutton.jspf" %>
+        </div>
+        <div class="d-flex d-lg-none align-items-center me-3">  
+          <!-- Cart button -->
+          <%@ include file="../../guest/components/buttons/cartButton.jspf" %>
+        </div>
+
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                 aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse pt-3 pb-2 py-lg-2 w-100" id="navbarSupportedContent">
-            <form class="d-flex col">
+            <form class="d-flex flex-column flex-md-row flex-grow-1 gap-2 flex-lg-row">
               <!-- Search bar -->
-              <div class="input-group-icon flex-grow-1 mx-md-5 pe-2">
-                <i class="fas fa-search input-box-icon text-primary"></i>
-                <input class="form-control border-1 input-box bg-100" type="search" placeholder="Tìm món ăn"
+              <div class="input-group mx-lg-3">
+                <!-- Search by keyword input -->
+                <input class="form-control bg-100" type="search" placeholder="Tìm món ăn"
                   aria-label="Tìm món ăn" id="search-bar" oninput="searchFoodByKeyword()" />
-                <div class="list-group search-results" style="position: absolute;" id="search-results-list"></div>
+
+                <!-- Search by image button -->
+                <%@ include file="../../hyperfeat/fooddetechbutton.jspf" %>
+
+                <!-- Search by keyword button -->
+                <div class="list-group search-results" style="position: absolute; top: 50px;" id="search-results-list"></div>
+                <button class="btn btn-primary" type="button" onclick="searchFoodByKeyword()" title="Tìm Món bằng từ khoá">
+                  <i class="ph-bold ph-magnifying-glass"></i>
+                </button>
               </div>
-              <%@ include file="../../hyperfeat/fooddetechbutton.jspf" %>
+
+              <div class="d-none d-lg-flex">
                 <!-- Cart button -->
-                <button type="button"
-                        class="btn ps-1 pe-2 py-0 position-relative nav-icon text-decoration-none my-auto text-primary fs-2 me-4"
-                        data-bs-toggle="modal" 
-                        data-bs-target="#cart-modal">
-                    <i class="fas fa-fw fa-cart-arrow-down"></i>
-                    <span id="cart-badge" class="position-absolute top-0 start-100 translate-middle px-2 fs-0 bg-danger rounded-pill text-white">
-                        <span class="visually-hidden">Giỏ hàng</span>
-                </button>
-
-                <%@ include file="../../hyperfeat/langviewbutton.jspf" %>
+                <%@ include file="../../guest/components/buttons/cartButton.jspf" %>
+              </div>
 
-                <!-- Login button -->
-                <c:choose>
-                    <c:when test="${isLoggedIn}">
-                        <div class="dropdown">
-                            <button class="btn btn-secondary text-white ms-2 px-3 px-lg-4" data-bs-toggle="dropdown"
-                                    aria-expanded="false" type="button">
-                                <i class="fas fa-user me-2"></i>
-                                ${username}
-                            </button>
-                            <ul class="dropdown-menu text-small shadow ms-2 w-100">
-                                <li><a class="dropdown-item" href="/user#info">Tài khoản của tôi</a></li>
-                                <li><a class="dropdown-item" href="/user#order">Đơn món</a></li>
-                                <li><a class="dropdown-item" href="/user/logout">Đăng xuất</a></li>
-                            </ul>
-                        </div>
-                    </c:when>
-                    <c:otherwise>
-                        <button class="btn btn-primary text-white ms-2 px-3 px-lg-4" data-bs-toggle="modal"
-                                data-bs-target="#login-modal" type="button">
-                            <i class="fas fa-user me-2"></i>
-                            Đăng nhập
-                        </button>
-                    </c:otherwise>
-                </c:choose>
+              <div class="d-flex">
+                <div class="d-flex d-md-none align-items-center">
+                  <!-- Language button -->
+                  <%@ include file="../../hyperfeat/langviewbutton.jspf" %>
+                </div>
+                <div class="flex-grow-1"></div>
+                  <!-- Login button -->
+                  <c:choose>
+                      <c:when test="${isLoggedIn}">
+                          <div class="dropdown">
+                              <button class="btn btn-secondary text-white px-3 px-lg-4 text-nowrap" data-bs-toggle="dropdown"
+                                      aria-expanded="false" type="button">
+                                  <i class="fas fa-user me-2"></i>
+                                  ${username}
+                              </button>
+                              <ul class="dropdown-menu text-small shadow ms-2 w-100">
+                                  <li><a class="dropdown-item" href="/user#info">Tài khoản của tôi</a></li>
+                                  <li><a class="dropdown-item" href="/user#order">Đơn món</a></li>
+                                  <li><a class="dropdown-item" href="/user/logout">Đăng xuất</a></li>
+                              </ul>
+                          </div>
+                      </c:when>
+                      <c:otherwise>
+                          <button class="btn btn-primary text-white px-3 px-lg-4 text-nowrap" data-bs-toggle="modal"
+                                  data-bs-target="#login-modal" type="button">
+                              <i class="fas fa-user me-2"></i>
+                              Đăng nhập
+                          </button>
+                      </c:otherwise>
+                  </c:choose>
+              </div>
             </form>
         </div>
 </nav>

src/main/webapp/WEB-INF/jspf/common/imports/javascript.jspf

@@ -4,5 +4,5 @@
 <script src="<%= request.getContextPath() + "vendors/@popperjs/popper.min.js"%>"></script>
 <script src="<%= request.getContextPath() + "vendors/bootstrap/bootstrap.min.js"%>"></script>
 <script src="<%= request.getContextPath() + "vendors/is/is.min.js"%>"></script>
-<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
+
 <script src="<%= request.getContextPath() + "vendors/fontawesome/all.min.js"%>"></script>

src/main/webapp/WEB-INF/jspf/guest/components/buttons/cartButton.jspf

@@ -0,0 +1,10 @@
+<%@ page pageEncoding="UTF-8" %>
+<button type="button"
+        class="btn px-1 pt-1 pb-0 ms-2 me-3 position-relative nav-icon text-decoration-none my-auto text-primary fs-3 fs-lg-2"
+        data-bs-toggle="modal"
+        data-bs-target="#cart-modal">
+  <i class="ph-bold ph-shopping-cart"></i>
+  <span class="cart-badge position-absolute start-100 translate-middle px-2 fs-0 bg-danger rounded-pill text-white notranslate"
+        style="top: 8px;"></span>
+    <span class="visually-hidden">Giỏ hàng</span>
+</button>

src/main/webapp/WEB-INF/jspf/guest/components/buttons/googleSignInButton.jspf

@@ -0,0 +1,54 @@
+<%@ page pageEncoding="UTF-8" %>
+<div id="g_id_onload"
+      data-client_id="878924649175-qs2bdc6eq08cfq344o6uft06hm22nrho.apps.googleusercontent.com"
+      data-context="signin"
+      data-ux_mode="popup"
+      data-callback="onSignIn"
+      data-skip_prompt_cookie="user"></div>
+
+<div class="g_id_signin"
+      data-type="standard"
+      data-shape="rectangular"
+      data-theme="outline"
+      data-text="signin_with"
+      data-size="large"
+      data-width=351
+      data-logo_alignment="left"></div>
+
+<script>
+  function onSignIn(googleUser) {
+    // Lấy các trường thông tin từ đối tượng JSON googleUser
+    console.log(googleUser);
+    const clientId = googleUser.clientId;
+    const client_id = googleUser.client_id;
+    const credential = googleUser.credential;
+    console.log(clientId);
+
+    // Gửi GET request đến server
+    fetch(`http://localhost:8001/get_credential/` + credential, {
+      method: "GET",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // console.log(data);
+        document.getElementById("txtEmail").value = data.email;
+        document.getElementById("txtPassword").value = data.password;
+
+        // document.getElementById("txtEmail").style.display = "none";
+        // document.getElementById("txtPassword").style.display = "none";
+        const loginButton = document.querySelector(
+          ".btn.btn-primary.btn-lg.btn-block.loginbutton"
+        );
+        if (loginButton) {
+          loginButton.click();
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+</script>

src/main/webapp/WEB-INF/jspf/guest/components/buttons/googleSignUpButton.jspf

@@ -0,0 +1,54 @@
+<%@ page pageEncoding="UTF-8" %>
+<div id="g_id_onload"
+      data-client_id="878924649175-qs2bdc6eq08cfq344o6uft06hm22nrho.apps.googleusercontent.com"
+      data-context="signup"
+      data-ux_mode="popup"
+      data-callback="onSignIn"
+      data-skip_prompt_cookie="user"></div>
+
+<div class="g_id_signin"
+      data-type="standard"
+      data-shape="rectangular"
+      data-theme="outline"
+      data-text="signup_with"
+      data-size="large"
+      data-width=351
+      data-logo_alignment="left"></div>
+
+<script>
+  function onSignIn(googleUser) {
+    // Lấy các trường thông tin từ đối tượng JSON googleUser
+    console.log(googleUser);
+    const clientId = googleUser.clientId;
+    const client_id = googleUser.client_id;
+    const credential = googleUser.credential;
+    console.log(clientId);
+
+    // Gửi GET request đến server
+    fetch(`http://localhost:8001/get_credential/` + credential, {
+      method: "GET",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // console.log(data);
+        document.getElementById("txtEmail").value = data.email;
+        document.getElementById("txtPassword").value = data.password;
+
+        // document.getElementById("txtEmail").style.display = "none";
+        // document.getElementById("txtPassword").style.display = "none";
+        const loginButton = document.querySelector(
+          ".btn.btn-primary.btn-lg.btn-block.loginbutton"
+        );
+        if (loginButton) {
+          loginButton.click();
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+</script>