diff --git a/views/addProduct.ejs b/views/addProduct.ejs
index c0e76b275514990505115f73bfeb165c0d08ffdb..37d249bfb9f6a35ea7a63bc9c48a85af41c970fb 100644
--- a/views/addProduct.ejs
+++ b/views/addProduct.ejs
@@ -3,29 +3,97 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>เพิ่มสินค้าใหม่</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+ background: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ }
+ .container {
+ background: white;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ max-width: 400px;
+ width: 100%;
+ }
+ h1 {
+ text-align: center;
+ color: #000000;
+ }
+ form div {
+ margin-bottom: 15px;
+ }
+ label {
+ display: block;
+ margin-bottom: 5px;
+ color: #333;
+ font-weight: bold;
+ }
+ input[type="text"],
+ input[type="number"],
+ textarea {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+ }
+ button {
+ width: 100%;
+ background: #007bff;
+ color: white;
+ border: none;
+ padding: 12px;
+ border-radius: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+ button:hover {
+ background: #0056b3;
+ }
+ a {
+ display: block;
+ text-align: center;
+ margin-top: 15px;
+ text-decoration: none;
+ color: #007bff;
+ font-weight: bold;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ </style>
</head>
<body>
- <h1>เพิ่มสินค้าใหม่</h1>
- <form action="/addProduct" method="POST">
- <div>
- <label>ชื่อสินค้า:</label>
- <input type="text" name="product_name" required>
- </div>
- <div>
- <label>ราคาสินค้า:</label>
- <input type="number" name="price" required>
- </div>
- <div>
- <label>URL รูปภาพ:</label>
- <input type="text" name="image" required>
- </div>
- <div>
- <label>รายละเอียดสินค้า:</label>
- <textarea name="description"></textarea>
- </div>
- <button type="submit">เพิ่มสินค้า</button>
- </form>
- <a href="/">กลับหน้าหลัก</a>
+ <div class="container">
+ <h1>เพิ่มสินค้าใหม่</h1>
+ <form action="/addProduct" method="POST">
+ <div>
+ <label>ชื่อสินค้า:</label>
+ <input type="text" name="product_name" required>
+ </div>
+ <div>
+ <label>ราคาสินค้า:</label>
+ <input type="number" name="price" required>
+ </div>
+ <div>
+ <label>URL รูปภาพ:</label>
+ <input type="text" name="image" required>
+ </div>
+ <div>
+ <label>รายละเอียดสินค้า:</label>
+ <textarea name="description" rows="4"></textarea>
+ </div>
+ <button type="submit">เพิ่มสินค้า</button>
+ </form>
+ <a href="/">กลับหน้าหลัก</a>
+ </div>
</body>
</html>
diff --git a/views/cart.ejs b/views/cart.ejs
index 3bba7f04666f9a1e8182fe7a9b2a1132b09e1db3..5fad4141c00f5df62c73cd1bbd0d0885f24a9e94 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -1,7 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>ตะกร้าสินค้าของคุณ</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ padding: 0;
+ background: #f4f4f4;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ h2 {
+ color: #000000;
+ }
+ table {
+ width: 90%;
+ max-width: 800px;
+ border-collapse: collapse;
+ background: white;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ margin-top: 20px;
+ border-radius: 8px;
+ overflow: hidden;
+ }
+ th, td {
+ padding: 12px;
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+ }
+ th {
+ background: #007bff;
+ color: white;
+ }
+ img {
+ border-radius: 5px;
+ }
+ button {
+ background: #dc3545;
+ color: white;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+ button:hover {
+ background: #c82333;
+ }
+ .total {
+ margin-top: 20px;
+ font-size: 20px;
+ color: #333;
+ }
+ .checkout-btn {
+ margin-top: 15px;
+ background: #28a745;
+ padding: 12px 20px;
+ font-size: 18px;
+ }
+ .checkout-btn:hover {
+ background: #218838;
+ }
+ a {
+ margin-top: 20px;
+ display: inline-block;
+ text-decoration: none;
+ color: #007bff;
+ font-weight: bold;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+
<h2>ตะกร้าสินค้าของคุณ</h2>
<% if (cart.length > 0) { %>
- <table border="1">
+ <table>
<tr>
<th>รูปสินค้า</th>
<th>ชื่อสินค้า</th>
@@ -26,13 +107,18 @@
<% }) %>
</table>
- <h3>ยอดรวม: <%= cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2) %> บาท</h3>
+ <div class="total">
+ <h3>ยอดรวม: <%= cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2) %> บาท</h3>
+ </div>
<form action="/checkout" method="POST">
- <button type="submit">ยืนยันคำสั่งซื้อ</button>
+ <button type="submit" class="checkout-btn">ยืนยันคำสั่งซื้อ</button>
</form>
<% } else { %>
<p>ไม่มีสินค้าในตะกร้า</p>
<% } %>
<a href="/">กลับไปซื้อสินค้า</a>
+
+</body>
+</html>
diff --git a/views/editProduct.ejs b/views/editProduct.ejs
index e303b0a5ebb25d9537838f5d9d463b1a9902d9bd..f1d3ed4433a3242602be62ee8f196dd863c237df 100644
--- a/views/editProduct.ejs
+++ b/views/editProduct.ejs
@@ -3,25 +3,87 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>เพิ่มสินค้าใหม่</title>
+ <title>แก้ไขสินค้า</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ padding: 0;
+ background: #f4f4f4;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ h1 {
+ color: #000000;
+ }
+ form {
+ background: white;
+ padding: 20px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ width: 100%;
+ max-width: 500px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ label {
+ font-weight: bold;
+ }
+ input, textarea {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+ textarea {
+ resize: vertical;
+ height: 100px;
+ }
+ button {
+ background: #28a745;
+ color: white;
+ border: none;
+ padding: 12px;
+ border-radius: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+ button:hover {
+ background: #218838;
+ }
+ a {
+ margin-top: 20px;
+ color: #007bff;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ </style>
</head>
<body>
- <h1>เพิ่มสินค้าใหม่</h1>
+ <h1>แก้ไขสินค้า</h1>
<form action="/products/<%= product.product_id %>/update" method="POST">
- <label>ชื่อสินค้า:</label>
- <input type="text" name="product_name" value="<%= product.product_name %>" required>
-
- <label>ราคา:</label>
- <input type="number" name="price" value="<%= product.price %>" required>
-
- <label>ลิงก์รูปภาพ:</label>
- <input type="text" name="image" value="<%= product.image %>">
-
- <label>รายละเอียด:</label>
- <textarea name="description" required><%= product.description %></textarea>
-
- <button type="submit">บันทึกการแก้ไข</button>
-</form>
+ <label>ชื่อสินค้า:</label>
+ <input type="text" name="product_name" value="<%= product.product_name %>" required>
+
+ <label>ราคา:</label>
+ <input type="number" name="price" value="<%= product.price %>" required>
+
+ <label>ลิงก์รูปภาพ:</label>
+ <input type="text" name="image" value="<%= product.image %>">
+
+ <label>รายละเอียด:</label>
+ <textarea name="description" required><%= product.description %></textarea>
+
+ <button type="submit">บันทึกการแก้ไข</button>
+ </form>
<a href="/">กลับหน้าหลัก</a>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/views/index.ejs b/views/index.ejs
index 277b7899690ca0392a36e929b1a599c09559b1a1..7dcd7bc026ef36f513c463c265dfa7f213498f22 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -61,10 +61,51 @@
</nav>
</div>
</div>
- <form action="/search" method="GET">
- <input type="text" name="q" placeholder="ค้นหาสินค้า..." required>
- <button type="submit">ค้นหา</button>
- </form>
+ <style>
+ /* ตกแต่งฟอร์ม */
+ .search-container form {
+ display: flex;
+ align-items: center;
+ background: #f0f0f0;
+ padding: 8px 15px;
+ border-radius: 25px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ /* ตกแต่งช่องค้นหา */
+ .search-container input[type="text"] {
+ border: none;
+ background: transparent;
+ outline: none;
+ padding: 8px 15px;
+ font-size: 16px;
+ width: 300px;
+ }
+
+ /* ตกแต่งปุ่มค้นหา */
+ .search-container button {
+ border: none;
+ background: #007bff;
+ color: white;
+ padding: 8px 20px;
+ border-radius: 20px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+
+ /* เอฟเฟกต์ตอน hover */
+ .search-container button:hover {
+ background: #0056b3;
+ }
+ </style>
+
+ <div class="search-container">
+ <form action="/search" method="GET">
+ <input type="text" name="q" placeholder="ค้นหาสินค้า..." required>
+ <button type="submit">ค้นหา</button>
+ </form>
+ </div>
<div class="gallery_section layout_padding">
<div class="container">
<div class="row">
diff --git a/views/orderConfirmation.ejs b/views/orderConfirmation.ejs
index 71599d7691f8427ba9b0a839a2f970a3eb47e7af..85ba80676e63dc50ffed0a670f715e1d616106ea 100644
--- a/views/orderConfirmation.ejs
+++ b/views/orderConfirmation.ejs
@@ -1,3 +1,58 @@
-<h2>สั่งซื้อสำเร็จ!</h2>
-<p>ขอบคุณที่สั่งซื้อสินค้ากับเรา</p>
-<a href="/">กลับไปหน้าหลัก</a>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>สั่งซื้อสำเร็จ</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: #f4f4f4;
+ }
+ .container {
+ text-align: center;
+ background: white;
+ padding: 30px;
+ border-radius: 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ max-width: 400px;
+ width: 100%;
+ }
+ h2 {
+ color: #28a745;
+ margin-bottom: 15px;
+ }
+ p {
+ color: #333;
+ font-size: 18px;
+ }
+ a {
+ display: inline-block;
+ margin-top: 20px;
+ padding: 12px 24px;
+ color: white;
+ background: #007bff;
+ text-decoration: none;
+ border-radius: 8px;
+ font-size: 18px;
+ transition: background 0.2s;
+ }
+ a:hover {
+ background: #0056b3;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h2>สั่งซื้อสำเร็จ!</h2>
+ <p>ขอบคุณที่สั่งซื้อสินค้ากับเรา</p>
+ <a href="/">กลับไปหน้าหลัก</a>
+ </div>
+</body>
+</html>
diff --git a/views/orderHistory.ejs b/views/orderHistory.ejs
index 58dd7aff0e3d4f465f903b805ca820f8c2774980..36f59351b44e717278781aa653e87632c7ecd6e0 100644
--- a/views/orderHistory.ejs
+++ b/views/orderHistory.ejs
@@ -1,27 +1,100 @@
-<h2>ประวัติการสั่งซื้อ</h2>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>ประวัติการสั่งซื้อ</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ background: #f4f4f4;
+ }
+ h2 {
+ color: #000000;
+ text-align: center;
+ }
+ .order-container {
+ max-width: 800px;
+ margin: 0 auto;
+ }
+ .order-card {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ margin-bottom: 15px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ }
+ .order-card h3 {
+ margin: 0 0 10px;
+ color: #28a745;
+ }
+ .order-info {
+ color: #555;
+ margin-bottom: 10px;
+ }
+ .order-items {
+ list-style: none;
+ padding: 0;
+ }
+ .order-items li {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #ddd;
+ padding: 10px 0;
+ }
+ .order-items img {
+ width: 50px;
+ height: 50px;
+ object-fit: cover;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+ .back-button {
+ display: block;
+ margin: 20px auto;
+ padding: 10px 20px;
+ background: #007bff;
+ color: white;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 5px;
+ width: fit-content;
+ }
+ .back-button:hover {
+ background: #0056b3;
+ }
+ </style>
+</head>
+<body>
+ <h2>ประวัติการสั่งซื้อ</h2>
+ <div class="order-container">
+ <% if (orders.length > 0) { %>
+ <% orders.forEach(order => { %>
+ <div class="order-card">
+ <h3>คำสั่งซื้อหมายเลข: <%= order.order_id %></h3>
+ <p class="order-info">วันที่สั่งซื้อ: <%= order.created_at %></p>
+ <p class="order-info">ยอดรวม: <%= order.total_amount %> บาท</p>
-<% if (orders.length > 0) { %>
- <% orders.forEach(order => { %>
- <div style="border: 1px solid #ddd; padding: 10px; margin: 10px;">
- <h3>คำสั่งซื้อหมายเลข: <%= order.order_id %></h3>
- <p>วันที่สั่งซื้อ: <%= order.created_at %></p>
- <p>ยอดรวม: <%= order.total_amount %> บาท</p>
-
- <h4>รายการสินค้า:</h4>
- <ul>
- <% order.items.forEach(item => { %>
- <li>
- <img src="<%= item.image %>" width="50">
- <b><%= item.product_name %></b> -
- จำนวน: <%= item.quantity %> -
- ราคา: <%= item.price %> บาท
- </li>
- <% }) %>
- </ul>
- </div>
- <% }) %>
-<% } else { %>
- <p>คุณยังไม่มีประวัติการสั่งซื้อ</p>
-<% } %>
-
-<a href="/">กลับไปหน้าหลัก</a>
+ <h4>รายการสินค้า:</h4>
+ <ul class="order-items">
+ <% order.items.forEach(item => { %>
+ <li>
+ <img src="<%= item.image %>" alt="<%= item.product_name %>">
+ <div>
+ <b><%= item.product_name %></b><br>
+ จำนวน: <%= item.quantity %> - ราคา: <%= item.price %> บาท
+ </div>
+ </li>
+ <% }) %>
+ </ul>
+ </div>
+ <% }) %>
+ <% } else { %>
+ <p style="text-align: center; color: #555;">คุณยังไม่มีประวัติการสั่งซื้อ</p>
+ <% } %>
+ <a href="/" class="back-button">กลับไปหน้าหลัก</a>
+ </div>
+</body>
+</html>
diff --git a/views/product.ejs b/views/product.ejs
index bd523879e3012d1ea55c626b52a60ec435261627..3f18a53ba36e457896d0d6042ea6e14b054e3bbd 100644
--- a/views/product.ejs
+++ b/views/product.ejs
@@ -5,38 +5,111 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>รายละเอียดสินค้า</title>
<style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ background: #f4f4f4;
+ text-align: center;
+ }
+ .container {
+ max-width: 500px;
+ margin: 40px auto;
+ background: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
img {
- width: 300px;
+ width: 100%;
+ max-width: 300px;
border-radius: 10px;
margin-bottom: 20px;
}
+ h1 {
+ color: #000000;
+ margin-bottom: 10px;
+ }
+ p {
+ color: #555;
+ margin: 5px 0;
+ }
+ strong {
+ color: #28a745;
+ }
+ .button-container {
+ margin-top: 20px;
+ }
+ button {
+ background: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ margin: 5px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+ button:hover {
+ background: #0056b3;
+ }
+ .delete-btn {
+ background: #dc3545;
+ }
+ .delete-btn:hover {
+ background: #c82333;
+ }
+ .edit-btn {
+ background: #ffc107;
+ color: black;
+ }
+ .edit-btn:hover {
+ background: #e0a800;
+ }
+ .back-link {
+ display: inline-block;
+ margin-top: 20px;
+ color: #007bff;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .back-link:hover {
+ text-decoration: underline;
+ }
+ input[type="number"] {
+ width: 60px;
+ margin-left: 5px;
+ padding: 5px;
+ }
</style>
</head>
<body>
- <h1><%= product.product_name %></h1>
-<img src="<%= product.image %>" alt="<%= product.product_name %>" width="300px">
-<p>ราคา: <strong><%= product.price %> บาท</strong></p>
-<p>รายละเอียด: <%= product.description || "ไม่มีรายละเอียด" %></p>
-<p>สร้างโดย: <%= product.owner %></p>
+ <div class="container">
+ <h1><%= product.product_name %></h1>
+ <img src="<%= product.image %>" alt="<%= product.product_name %>">
+ <p>ราคา: <strong><%= product.price %> บาท</strong></p>
+ <p>รายละเอียด: <%= product.description || "ไม่มีรายละเอียด" %></p>
+ <p>สร้างโดย: <%= product.owner %></p>
-<% if (currentUserEmail === product.owner) { %>
- <form action="/delete_product/<%= product.product_id %>" method="POST" onsubmit="return confirm('ยืนยันการลบสินค้านี้?');">
- <button type="submit" style="color: red;">ลบสินค้า</button>
- </form>
- <form action="/products/<%= product.product_id %>/edit" method="GET">
- <button type="submit" style="color: yellow;">เเก้ไขสินค้า</button>
- </form>
- <% } %>
- <form action="/cart/add" method="POST">
- <input type="hidden" name="product_id" value="<%= product.product_id %>">
- <input type="hidden" name="price" value="<%= product.price %>">
- <label>จำนวน: </label>
- <input type="number" name="quantity" value="1" min="1">
- <button type="submit">เพิ่มลงตะกร้า</button>
- </form>
+ <% if (currentUserEmail === product.owner) { %>
+ <div class="button-container">
+ <form action="/delete_product/<%= product.product_id %>" method="POST" onsubmit="return confirm('ยืนยันการลบสินค้านี้?');" style="display:inline;">
+ <button type="submit" class="delete-btn">ลบสินค้า</button>
+ </form>
+ <form action="/products/<%= product.product_id %>/edit" method="GET" style="display:inline;">
+ <button type="submit" class="edit-btn">เเก้ไขสินค้า</button>
+ </form>
+ </div>
+ <% } %>
+ <form action="/cart/add" method="POST" class="button-container">
+ <input type="hidden" name="product_id" value="<%= product.product_id %>">
+ <input type="hidden" name="price" value="<%= product.price %>">
+ <label>จำนวน: </label>
+ <input type="number" name="quantity" value="1" min="1">
+ <button type="submit">เพิ่มลงตะกร้า</button>
+ </form>
-<a href="/">กลับหน้าหลัก</a>
-
+ <a href="/" class="back-link">กลับหน้าหลัก</a>
+ </div>
</body>
</html>
diff --git a/views/searchResults.ejs b/views/searchResults.ejs
index b373031f173edf1cb46757c0552b30bb76a034f1..c4e145eabfc95fb6cc970c48266fc69d0accbdb6 100644
--- a/views/searchResults.ejs
+++ b/views/searchResults.ejs
@@ -1,17 +1,96 @@
-<h2>ผลลัพธ์การค้นหา "<%= searchQuery %>"</h2>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>ผลลัพธ์การค้นหา "<%= searchQuery %>"</title>
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ background: #f4f4f4;
+ text-align: center;
+ }
+ h2 {
+ color: #000000;
+ }
+ .container {
+ max-width: 900px;
+ margin: 0 auto;
+ }
+ .product-list {
+ list-style: none;
+ padding: 0;
+ }
+ .product-item {
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ margin-bottom: 15px;
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ transition: transform 0.2s;
+ }
+ .product-item:hover {
+ transform: scale(1.02);
+ }
+ .product-item img {
+ width: 100px;
+ height: 100px;
+ object-fit: cover;
+ border-radius: 5px;
+ }
+ .product-details {
+ text-align: left;
+ flex-grow: 1;
+ }
+ .product-details h3 {
+ margin: 0;
+ color: #28a745;
+ }
+ .product-details p {
+ margin: 5px 0;
+ color: #555;
+ }
+ .back-button {
+ display: inline-block;
+ margin-top: 20px;
+ padding: 10px 20px;
+ background: #007bff;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ }
+ .back-button:hover {
+ background: #0056b3;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h2>ผลลัพธ์การค้นหา "<%= searchQuery %>"</h2>
-<% if (products.length > 0) { %>
- <ul>
- <% products.forEach(product => { %>
- <li>
- <h3><%= product.product_name %></h3>
- <p>ราคา: <%= product.price %> บาท</p>
- <p><%= product.description %></p>
- <img src="<%= product.image %>" alt="<%= product.product_name %>" width="100">
- <a href="/">กลับหน้าหลัก</a>
- </li>
- <% }) %>
- </ul>
-<% } else { %>
- <p>ไม่พบสินค้าที่ตรงกับคำค้นหา</p>
-<% } %>
\ No newline at end of file
+ <% if (products.length > 0) { %>
+ <ul class="product-list">
+ <% products.forEach(product => { %>
+ <li class="product-item">
+ <img src="<%= product.image %>" alt="<%= product.product_name %>">
+ <div class="product-details">
+ <h3><%= product.product_name %></h3>
+ <p>ราคา: <%= product.price %> บาท</p>
+ <p><%= product.description %></p>
+ </div>
+ </li>
+ <% }) %>
+ </ul>
+ <% } else { %>
+ <p style="color: #555;">ไม่พบสินค้าที่ตรงกับคำค้นหา</p>
+ <% } %>
+
+ <a href="/" class="back-button">กลับหน้าหลัก</a>
+ </div>
+</body>
+</html>