finish contact page

Quantaphocpython · Mar 4, 2024 · 45b6277 · 45b6277
1 parent 2bfaeda
commit 45b6277
Show file tree

Hide file tree

Showing 7 changed files with 289 additions and 156 deletions.
diff --git a/src/main/java/org/ecommerce/spring/boot/vegetable/project/controller/ContactController.java b/src/main/java/org/ecommerce/spring/boot/vegetable/project/controller/ContactController.java
@@ -0,0 +1,19 @@
+package org.ecommerce.spring.boot.vegetable.project.controller;
+
+import jakarta.servlet.http.HttpServletRequest;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.ModelAndView;
+
+@RestController
+@RequestMapping("/contact")
+public class ContactController {
+
+    @GetMapping
+    public ModelAndView contact(HttpServletRequest request) {
+        ModelAndView modelAndView = new ModelAndView("contact");
+        modelAndView.addObject("request", request);
+        return modelAndView;
+    }
+}
diff --git a/src/main/resources/static/css/blog.css b/src/main/resources/static/css/blog.css
@@ -59,6 +59,12 @@ body {
 }
 
 .recent_news-title {
+    display: -webkit-box;
+    line-height: 20px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    clear: both;
+    overflow: hidden;
     font-weight: bold;
     font-size: 16px;
 }

diff --git a/src/main/resources/static/css/contact.css b/src/main/resources/static/css/contact.css
@@ -0,0 +1,41 @@
+
+
+.contact-wrapper {
+
+}
+
+.contact-item_icon {
+    font-size: 40px;
+    color: #7fad39;
+    filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.1));
+}
+
+.contact-item_name {
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.contact-item_infor {
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.contact-map-wrapper {
+    height: 500px;
+    width: 100%;
+    margin-top: 80px;
+    position: relative;
+}
+
+.contact-map-marker {
+    width: fit-content;
+    height: fit-content;
+    font-size: 45px;
+    color: rgb(233,68,52);
+    position: absolute;
+    top: 41%;
+    left: 58%;
+    transform: translate(-50%, -50%);
+    letter-spacing: 0;
+}
diff --git a/src/main/resources/static/js/contact.js b/src/main/resources/static/js/contact.js
diff --git a/src/main/resources/templates/contact.html b/src/main/resources/templates/contact.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" th:lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Contact</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+            crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script th:src="@{/js/home.js}"></script>
+    <link rel="stylesheet" th:href="@{/css/header.css}">
+    <link rel="stylesheet" th:href="@{/css/home.css}">
+    <link rel="stylesheet" th:href="@{/css/page_title_img.css}">
+    <link rel="stylesheet" th:href="@{css/footer.css}">
+    <link rel="stylesheet" th:href="@{css/shop.css}">
+    <link rel="stylesheet" th:href="@{css/contact.css}">
+</head>
+<body>
+    <div th:insert="fragments/fragments :: header"></div>
+    <div class="container col-9 search-content">
+        <div th:insert="home :: header-search-bar"></div>
+    </div>
+    <div th:insert="fragments/fragments :: page-title-image"></div>
+
+    <div class="container col-9 search-content">
+        <div class="row contact-wrapper mb-5 mt-5">
+            <div class="col-3 text-center">
+                <i class="bi bi-telephone contact-item_icon"></i>
+                <h5 class="contact-item_name">Phone</h5>
+                <span class="contact-item_infor">0123456789</span>
+            </div>
+            <div class="col-3 text-center">
+                <i class="bi bi-geo-alt contact-item_icon"></i>
+                <h5 class="contact-item_name">Address</h5>
+                <span class="contact-item_infor">60-49 Road 11378 New York</span>
+            </div>
+            <div class="col-3 text-center">
+                <i class="bi bi-clock contact-item_icon"></i>
+                <h5 class="contact-item_name">Open time</h5>
+                <span class="contact-item_infor">10:00 am to 23:00 pm</span>
+            </div>
+            <div class="col-3 text-center">
+                <i class="bi bi-envelope contact-item_icon"></i>
+                <h5 class="contact-item_name">Email</h5>
+                <span class="contact-item_infor">[email protected]</span>
+            </div>
+        </div>
+    </div>
+    <div id="address-map" class="contact-map-wrapper text-center">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3917.9803089247794!2d106.60406437465706!3d10.889100789266577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1svi!2s!4v1709538294818!5m2!1svi!2s" width="600" height="450" style="border:0;"
+                allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-100"></iframe>
+        <span class="contact-map-marker"><i class="bi bi-geo-alt-fill"></i></span>
+    </div>
+
+    <div th:replace="/fragments/footer :: footer"></div>
+
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBT5kkEE32KlVGc64iWgHtscTr3rV1XYhI&callback=initMap" async defer></script>
+    <script type="text/javascript" th:src="@{/js/contact.js}"></script>
+</body>
+</html>
diff --git a/src/main/resources/templates/fragments/fragments.html b/src/main/resources/templates/fragments/fragments.html
@@ -100,7 +100,10 @@
                                     </a>
                                 </li>
                                 <li class="nav-item col-2">
-                                    <a class="nav-link header-menu-item-btn" href="#">CONTACT</a>
+                                    <a class="nav-link header-menu-item-btn" th:href="@{/contact}"
+                                       th:classappend="${request.getRequestURL().toString().contains('contact')} ? 'active':''">
+                                        CONTACT
+                                    </a>
                                 </li>
                             </ul>
 
@@ -121,11 +124,14 @@
         <div class="page-title-wrapper">
             <img th:src="@{/img/breadcrumb.jpg.webp}" class="page-title-img">
             <h2 class="page-title"
-                th:text="${request.getRequestURL().toString().contains('shop')} ? 'Ogani Shop':''">
+                th:text="${request.getRequestURL().toString().contains('shop')} ? 'OGANI SHOP':''">
             </h2>
             <h2 class="page-title"
                 th:text="${request.getRequestURL().toString().contains('blog')} ? 'BLOG':''">
             </h2>
+            <h2 class="page-title"
+                th:text="${request.getRequestURL().toString().contains('contact')} ? 'CONTACT US':''">
+            </h2>
         </div>
     </div>
 </body>