diff --git a/public/css/index.css b/public/css/index.css
index b453322f8f7e993d47e0cd06d5fec96f5a17e5d7..e4eb391cc4f34966e431bdba41b5f7b9b1969860 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -3,4 +3,15 @@ img {
height: auto;
border-radius: 8px;
margin-bottom: 10px;
- }
\ No newline at end of file
+ }
+
+.search {
+ width: 90%;
+ height: 30px;
+ border-radius: 5px;
+}
+
+.btn-orange {
+ background-color: orange;
+ color: aliceblue;
+}
\ No newline at end of file
diff --git a/public/css/product.css b/public/css/product.css
new file mode 100644
index 0000000000000000000000000000000000000000..d091fc2865c01470ad031885688b6cfa185a6d77
--- /dev/null
+++ b/public/css/product.css
@@ -0,0 +1,3 @@
+.btn-orange {
+ background-color: orange;
+}
\ No newline at end of file
diff --git a/public/images/books.png b/public/images/books.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ee3bd0daec9dccf0622af8cd9a91a3a06452a91
Binary files /dev/null and b/public/images/books.png differ
diff --git a/public/images/books.webp b/public/images/books.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ea7df3ff11c318c92a4e59dd0f412fd979220458
Binary files /dev/null and b/public/images/books.webp differ
diff --git a/public/images/bookshop.png b/public/images/bookshop.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc69a8a92e1d89bd5f8e59af90def0e8b0015528
Binary files /dev/null and b/public/images/bookshop.png differ
diff --git a/views/addProduct.ejs b/views/addProduct.ejs
index c0e76b275514990505115f73bfeb165c0d08ffdb..b514859b182686ae8df4a917ee50ead3903caefb 100644
--- a/views/addProduct.ejs
+++ b/views/addProduct.ejs
@@ -1,31 +1,71 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="th">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>เพิ่มสินค้าใหม่</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>เพิ่มสินค้าใหม่</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <style>
+ body {
+ background-color: #fff;
+ color: #333;
+ }
+ .container {
+ max-width: 600px;
+ margin-top: 50px;
+ background: #f9f9f9;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ </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">
+ <h2 class="text-center mb-4">เพิ่มสินค้าใหม่</h2>
+
+ <form action="/addProduct" method="POST">
+ <div class="mb-3">
+ <label class="form-label">ชื่อสินค้า:</label>
+ <input type="text" name="product_name" class="form-control" required>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">ราคาสินค้า:</label>
+ <input type="number" name="price" class="form-control" required>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">URL รูปภาพ:</label>
+ <input type="text" name="image" class="form-control" required>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">รายละเอียดสินค้า:</label>
+ <textarea name="description" class="form-control"></textarea>
+ </div>
+
+ <button type="submit" class="btn btn-orange w-100">เพิ่มสินค้า</button>
+ </form>
+
+ <div class="text-center mt-3">
+ <a href="/" class="btn btn-secondary">กลับหน้าหลัก</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
diff --git a/views/cart.ejs b/views/cart.ejs
index 3bba7f04666f9a1e8182fe7a9b2a1132b09e1db3..eff22b6cfbcc99cbd79978aa89eee3cd49c670b4 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -1,38 +1,93 @@
-<h2>ตะกร้าสินค้าของคุณ</h2>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ตะกร้าสินค้าของคุณ</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <style>
+ body {
+ background-color: #fff;
+ color: #333;
+ }
+ .container {
+ max-width: 900px;
+ margin-top: 30px;
+ padding: 20px;
+ background: #f9f9f9;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ table th, table td {
+ text-align: center;
+ }
+ .product-image {
+ max-width: 100px;
+ border-radius: 5px;
+ }
+ </style>
+</head>
+<body>
-<% if (cart.length > 0) { %>
- <table border="1">
- <tr>
- <th>รูปสินค้า</th>
- <th>ชื่อสินค้า</th>
- <th>จำนวน</th>
- <th>ราคา</th>
- <th>รวม</th>
- <th>ลบ</th>
- </tr>
- <% cart.forEach(item => { %>
- <tr>
- <td><img src="<%= item.image %>" width="50"></td>
- <td><%= item.product_name %></td>
- <td><%= item.quantity %></td>
- <td><%= item.price %> บาท</td>
- <td><%= (item.price * item.quantity).toFixed(2) %> บาท</td>
- <td>
- <form action="/cart/remove/<%= item.product_id %>" method="POST">
- <button type="submit">ลบ</button>
- </form>
- </td>
- </tr>
- <% }) %>
- </table>
+<div class="container">
+ <h2 class="text-center mb-4">ตะกร้าสินค้าของคุณ</h2>
- <h3>ยอดรวม: <%= cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2) %> บาท</h3>
+ <% if (cart.length > 0) { %>
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>รูปสินค้า</th>
+ <th>ชื่อสินค้า</th>
+ <th>จำนวน</th>
+ <th>ราคา</th>
+ <th>รวม</th>
+ <th>ลบ</th>
+ </tr>
+ </thead>
+ <tbody>
+ <% cart.forEach(item => { %>
+ <tr>
+ <td><img src="<%= item.image %>" class="product-image"></td>
+ <td><%= item.product_name %></td>
+ <td><%= item.quantity %></td>
+ <td><%= item.price %> บาท</td>
+ <td><%= (item.price * item.quantity).toFixed(2) %> บาท</td>
+ <td>
+ <form action="/cart/remove/<%= item.product_id %>" method="POST">
+ <button type="submit" class="btn btn-danger btn-sm">ลบ</button>
+ </form>
+ </td>
+ </tr>
+ <% }) %>
+ </tbody>
+ </table>
- <form action="/checkout" method="POST">
- <button type="submit">ยืนยันคำสั่งซื้อ</button>
- </form>
-<% } else { %>
- <p>ไม่มีสินค้าในตะกร้า</p>
-<% } %>
+ <h3>ยอดรวม: <%= cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2) %> บาท</h3>
-<a href="/">กลับไปซื้อสินค้า</a>
+ <form action="/checkout" method="POST">
+ <button type="submit" class="btn btn-orange w-100">ยืนยันคำสั่งซื้อ</button>
+ </form>
+ <% } else { %>
+ <p class="text-center text-danger">ไม่มีสินค้าในตะกร้า</p>
+ <% } %>
+
+ <div class="text-center mt-3">
+ <a href="/" class="btn btn-secondary">กลับไปซื้อสินค้า</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/views/editProduct.ejs b/views/editProduct.ejs
index e303b0a5ebb25d9537838f5d9d463b1a9902d9bd..e33787249ddc23452f66f32015c62c3a45147d6e 100644
--- a/views/editProduct.ejs
+++ b/views/editProduct.ejs
@@ -1,27 +1,71 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="th">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>เพิ่มสินค้าใหม่</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>แก้ไขสินค้า</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <style>
+ body {
+ background-color: #fff;
+ color: #333;
+ }
+ .container {
+ max-width: 600px;
+ margin-top: 50px;
+ background: #f9f9f9;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ </style>
</head>
<body>
- <h1>เพิ่มสินค้าใหม่</h1>
- <form action="/products/<%= product.product_id %>/update" method="POST">
- <label>ชื่อสินค้า:</label>
- <input type="text" name="product_name" value="<%= product.product_name %>" required>
+
+<div class="container">
+ <h2 class="text-center mb-4">แก้ไขสินค้า</h2>
- <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>
+ <form action="/products/<%= product.product_id %>/update" method="POST">
+ <div class="mb-3">
+ <label class="form-label">ชื่อสินค้า:</label>
+ <input type="text" name="product_name" value="<%= product.product_name %>" class="form-control" required>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">ราคา:</label>
+ <input type="number" name="price" value="<%= product.price %>" class="form-control" required>
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">ลิงก์รูปภาพ:</label>
+ <input type="text" name="image" value="<%= product.image %>" class="form-control">
+ </div>
+
+ <div class="mb-3">
+ <label class="form-label">รายละเอียด:</label>
+ <textarea name="description" class="form-control" required><%= product.description %></textarea>
+ </div>
+
+ <button type="submit" class="btn btn-orange w-100">บันทึกการแก้ไข</button>
+ </form>
+
+ <div class="text-center mt-3">
+ <a href="/" class="btn btn-secondary">กลับหน้าหลัก</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/views/index.ejs b/views/index.ejs
index acdc57e8b74e2c85b6c1fae0654e312f935f1702..98e68e1f95f032740ca8677a38b6776161fbb513 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -36,7 +36,7 @@
<div class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
- <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
+ <div class="logo"><a href="/"><h1 style="color: aliceblue;" class="h1">Bookshop</h1></a></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -67,29 +67,20 @@
<a class="nav-link" href="/register">Register</a>
</li>
<% } %>
- <li class="nav-item">
- <a class="nav-link" href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
- </li>
</ul>
</div>
</nav>
</div>
</div>
<!--header section end -->
- <!--header search start -->
- <form action="/search" method="GET">
- <input type="text" name="q" placeholder="ค้นหาสินค้า..." required>
- <button type="submit">ค้นหา</button>
- </form>
- <!--header search end -->
-
<!-- gallery section start -->
<div class="gallery_section layout_padding">
<div class="container">
<div class="row">
- <div class="col-sm-12">
- <h1 class="gallery_taital">bookstore</h1>
- </div>
+ <form action="/search" method="GET" class="col-sm-12">
+ <input type="text" name="q" placeholder="ค้นหาสินค้า..." required class="search">
+ <button type="submit" class="btn btn-orange">ค้นหา</button>
+ </form>
</div>
<div class="">
<div class="gallery_section_2">
diff --git a/views/orderConfirmation.ejs b/views/orderConfirmation.ejs
index 71599d7691f8427ba9b0a839a2f970a3eb47e7af..eb1a582c24c38777697d4305f4a11b706a58fc5f 100644
--- a/views/orderConfirmation.ejs
+++ b/views/orderConfirmation.ejs
@@ -1,3 +1,56 @@
-<h2>สั่งซื้อสำเร็จ!</h2>
-<p>ขอบคุณที่สั่งซื้อสินค้ากับเรา</p>
-<a href="/">กลับไปหน้าหลัก</a>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>สั่งซื้อสำเร็จ!</title>
+ <!-- Font Awesome -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <style>
+ body {
+ background-color: #f9f9f9;
+ color: #333;
+ }
+ .container {
+ max-width: 600px;
+ margin-top: 50px;
+ padding: 20px;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ .checkmark-icon {
+ font-size: 50px;
+ color: #28a745;
+ }
+ </style>
+</head>
+<body>
+
+<div class="container text-center">
+ <h2 class="mb-3">สั่งซื้อสำเร็จ!</h2>
+ <i class="fas fa-check-circle checkmark-icon"></i> <!-- Font Awesome Tick Icon -->
+
+ <p class="mt-3">ขอบคุณที่สั่งซื้อสินค้ากับเรา</p>
+
+ <div class="mt-3">
+ <a href="/" class="btn btn-orange w-100">กลับไปหน้าหลัก</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/views/orderHistory.ejs b/views/orderHistory.ejs
index 58dd7aff0e3d4f465f903b805ca820f8c2774980..def7471b9085d55d19c88bde9f7b54b0339e924a 100644
--- a/views/orderHistory.ejs
+++ b/views/orderHistory.ejs
@@ -1,27 +1,82 @@
-<h2>ประวัติการสั่งซื้อ</h2>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ประวัติการสั่งซื้อ</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <style>
+ body {
+ background-color: #fff;
+ color: #333;
+ }
+ .container {
+ max-width: 900px;
+ margin-top: 30px;
+ padding: 20px;
+ background: #f9f9f9;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ .product-image {
+ max-width: 80px;
+ border-radius: 5px;
+ }
+ .order-card {
+ border: 1px solid #ddd;
+ padding: 15px;
+ margin-bottom: 20px;
+ background: #f9f9f9;
+ border-radius: 10px;
+ }
+ </style>
+</head>
+<body>
-<% 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>
+<div class="container">
+ <h2 class="text-center mb-4">ประวัติการสั่งซื้อ</h2>
- <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>
-<% } %>
+ <% if (orders.length > 0) { %>
+ <% orders.forEach(order => { %>
+ <div class="order-card">
+ <h3>คำสั่งซื้อหมายเลข: <%= order.order_id %></h3>
+ <p><strong>วันที่สั่งซื้อ:</strong> <%= order.created_at %></p>
+ <p><strong>ยอดรวม:</strong> <%= order.total_amount %> บาท</p>
-<a href="/">กลับไปหน้าหลัก</a>
+ <h4>รายการสินค้า:</h4>
+ <ul>
+ <% order.items.forEach(item => { %>
+ <li>
+ <img src="<%= item.image %>" class="product-image" alt="<%= item.product_name %>">
+ <b><%= item.product_name %></b> -
+ จำนวน: <%= item.quantity %> -
+ ราคา: <%= item.price %> บาท
+ </li>
+ <% }) %>
+ </ul>
+ </div>
+ <% }) %>
+ <% } else { %>
+ <p class="text-center text-danger">คุณยังไม่มีประวัติการสั่งซื้อ</p>
+ <% } %>
+
+ <div class="text-center mt-3">
+ <a href="/" class="btn btn-secondary">กลับไปหน้าหลัก</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/views/product.ejs b/views/product.ejs
index bd523879e3012d1ea55c626b52a60ec435261627..25cbcc00d9a21f806f51b04a2064834a1ac2b983 100644
--- a/views/product.ejs
+++ b/views/product.ejs
@@ -1,42 +1,80 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="th">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>รายละเอียดสินค้า</title>
- <style>
- img {
- width: 300px;
- border-radius: 10px;
- margin-bottom: 20px;
- }
- </style>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title><%= product.product_name %> | Bookshop</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <link rel="stylesheet" href="/css/product.css">
+ <style>
+ body {
+ background-color: #1a1a1a;
+ color: white;
+ }
+ .container {
+ max-width: 800px;
+ margin-top: 50px;
+ background: #222;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);
+ }
+ .product-image {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ .btn-yellow {
+ background-color: #ffcc00;
+ color: black;
+ }
+ .btn-danger {
+ background-color: red;
+ }
+ </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>
-<% 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>
+<div class="container text-center">
+ <h1 class="mb-3"><%= product.product_name %></h1>
+ <img src="<%= product.image %>" alt="<%= product.product_name %>" class="product-image mb-3">
+ <p><strong>ราคา:</strong> <span class="text-warning"><%= product.price %> บาท</span></p>
+ <p><strong>รายละเอียด:</strong> <%= product.description || "ไม่มีรายละเอียด" %></p>
+ <p><strong>สร้างโดย:</strong> <%= product.owner %></p>
+ <% if (currentUserEmail === product.owner) { %>
+ <div class="d-flex justify-content-center gap-2">
+ <form action="/delete_product/<%= product.product_id %>" method="POST" onsubmit="return confirm('ยืนยันการลบสินค้านี้?');">
+ <button type="submit" class="btn btn-danger">ลบสินค้า</button>
+ </form>
+ <form action="/products/<%= product.product_id %>/edit" method="GET">
+ <button type="submit" class="btn btn-yellow">แก้ไขสินค้า</button>
+ </form>
+ </div>
+ <% } %>
-<a href="/">กลับหน้าหลัก</a>
-
+ <form action="/cart/add" method="POST" class="mt-3">
+ <input type="hidden" name="product_id" value="<%= product.product_id %>">
+ <input type="hidden" name="price" value="<%= product.price %>">
+ <div class="d-flex justify-content-center align-items-center gap-2">
+ <label>จำนวน:</label>
+ <input type="number" name="quantity" value="1" min="1" class="form-control w-25">
+ <button type="submit" class="btn btn-orange">เพิ่มลงตะกร้า</button>
+ </div>
+ </form>
+
+ <a href="/" class="btn btn-secondary mt-3">กลับหน้าหลัก</a>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
diff --git a/views/searchResults.ejs b/views/searchResults.ejs
index f6fdc95fca6cc39357e3babed7a856dcd9234911..b3cc1a9bf5dad99ccf4357071f565d4516844c7c 100644
--- a/views/searchResults.ejs
+++ b/views/searchResults.ejs
@@ -1,16 +1,75 @@
-<h2>ผลลัพธ์การค้นหา "<%= searchQuery %>"</h2>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>ผลลัพธ์การค้นหา "<%= searchQuery %>"</title>
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
+ <link rel="stylesheet" href="/css/searchResults.css">
+ <style>
+ body {
+ background-color: #fff;
+ color: #333;
+ }
+ .container {
+ max-width: 900px;
+ margin-top: 30px;
+ padding: 20px;
+ }
+ .product-card {
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ padding: 15px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ margin-bottom: 20px;
+ background: #f9f9f9;
+ }
+ .product-card img {
+ max-width: 100px;
+ border-radius: 5px;
+ }
+ .btn-orange {
+ background-color: #ff6600;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 5px;
+ }
+ .btn-orange:hover {
+ background-color: #cc5200;
+ }
+ </style>
+</head>
+<body>
-<% 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">
- </li>
- <% }) %>
- </ul>
-<% } else { %>
- <p>ไม่พบสินค้าที่ตรงกับคำค้นหา</p>
-<% } %>
\ No newline at end of file
+<div class="container">
+ <h2 class="text-center mb-4">ผลลัพธ์การค้นหา "<%= searchQuery %>"</h2>
+
+ <% if (products.length > 0) { %>
+ <div class="row">
+ <% products.forEach(product => { %>
+ <div class="col-md-4">
+ <div class="product-card text-center">
+ <img src="<%= product.image %>" alt="<%= product.product_name %>">
+ <h4 class="mt-2"><%= product.product_name %></h4>
+ <p class="text-warning"><strong>ราคา:</strong> <%= product.price %> บาท</p>
+ <p><%= product.description %></p>
+ <a href="/product/<%= product.product_id %>" class="btn btn-orange">ดูรายละเอียด</a>
+ </div>
+ </div>
+ <% }) %>
+ </div>
+ <% } else { %>
+ <p class="text-center text-danger">ไม่พบสินค้าที่ตรงกับคำค้นหา</p>
+ <% } %>
+
+ <div class="text-center mt-3">
+ <a href="/" class="btn btn-secondary">กลับหน้าหลัก</a>
+ </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>