diff --git a/scripts/client/pages/home/index.php b/scripts/client/pages/home/index.php
index 179443631e9fe32a46d4f2eba4da542dffdf5017..7218e2ab0305a674ad5e4c72d01cd05818e5d936 100644
--- a/scripts/client/pages/home/index.php
+++ b/scripts/client/pages/home/index.php
@@ -1,6 +1,11 @@
<?php require_once __DIR__ . "/../template/header.php" ?>
<?php require_once __DIR__ . "/../template/navbar.php" ?>
+<style>
+ /* page css part */
+ <?php include '../../public/css/pages/product.css'; ?>
+</style>
+
<section id="product">
<div class="queryCt">
<div class="productMenu">
diff --git a/scripts/client/public/assets/images/hehe.PNG b/scripts/client/public/assets/images/hehe.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2851278effacabd49bc13a360b14ce3fd8b97436
Binary files /dev/null and b/scripts/client/public/assets/images/hehe.PNG differ
diff --git a/scripts/client/public/css/pages/product.css b/scripts/client/public/css/pages/product.css
index 81534f77b5f4bbdb0d7e55a55a62173fee7bb14c..1e67ef608ed67d10587fb678b97c29ab3b0ceaad 100644
--- a/scripts/client/public/css/pages/product.css
+++ b/scripts/client/public/css/pages/product.css
@@ -10,8 +10,8 @@
#numsofObj {
background-color: inherit;
- font-size: 1.5rem;
- width: 1.7rem;
+ font-size: 1.25rem;
+ width: 1.5rem;
color: white;
border: none;
justify-items: center;
@@ -20,8 +20,8 @@
#numsofObj::placeholder {
background-color: inherit;
- font-size: 1.5rem;
- width: 1.7rem;
+ font-size: 1.25rem;
+ width: 1.5rem;
color: white;
border: none;
justify-items: center;
@@ -35,7 +35,7 @@
justify-content: space-between;
}
-@media only screen and (max-width: 1175px) {
+@media only screen and (max-width: 1315px) {
.productMenu {
flex-direction: column;
}
@@ -48,14 +48,15 @@
.pageTitle {
float: left;
- font-size: 1.5rem;
+ font-size: 2.5rem;
+ font-weight: bold;
flex-wrap: nowrap;
display: flex;
align-items: center;
}
.listTitle {
- font-size: 1.5rem;
+ font-size: 1.25rem;
align-items: center;
margin-bottom: 1.5rem;
display: inline;
@@ -71,6 +72,14 @@
font-size: 1.2rem;
}
+ #numsofObj {
+ font-size: 1.2rem;
+ }
+
+ #numsofObj::placeholder {
+ font-size: 1.2rem;
+ }
+
.dropdown1, .dropdown2, .dropdown3 {
width: 150px;
height: 35px;
@@ -89,6 +98,10 @@
font-size: 1rem;
}
+ #numsofObj::placeholder {
+ font-size: 1rem;
+ }
+
.listTitle {
font-size: 1rem;
}
@@ -231,31 +244,45 @@
}
}
-@media screen and (min-width: 1010px) {
+@media screen and (max-width: 1260px) {
.card {
- width: 25%;
+ width: calc(34% - 70px) !important;
}
}
-@media screen and (min-width: 936px) {
+@media screen and (max-width: 920px) {
.card {
- width: 40%;
+ width: calc(50% - 60px) !important;
}
}
+@media screen and (max-width: 570px) {
+ .card {
+ width: 100% !important;
+ }
+}
+
+#queryResultProduct {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ width: 100%;
+}
+
.card {
background-color: #121212;
border-radius: 17px;
- padding: 8px;
- margin: 8px;
+ padding: 20px;
+ margin: 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
- justify-content: center;
- width: 20vw;
+ justify-content: space-between;
+ width: calc(25% - 60px);
font-size: 10px;
cursor: pointer;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.card:hover {
@@ -270,21 +297,23 @@
}
.cardImage {
- width: 19vw;
- height: 30vh;
+ width: 100%;
+ height: 300px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ overflow: hidden;
+}
+
+.cardImage img, .cardImage video {
+ width: 100%;
+ height: 100%;
object-fit: cover;
- border-radius: 0.5rem;
- margin-top: 1vh;
- margin-bottom: 2vh;
}
.productdesc {
- padding-left: 4rem;
- padding-right: 4rem;
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- width: 90%;
- height: auto;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
}
.productTitle {
diff --git a/scripts/client/public/js/product.js b/scripts/client/public/js/product.js
index 541c5f46c2091f9e921cc590821af227b835aab0..d1b7e572839d1c91a10ac2ac916c7e3188149d2e 100644
--- a/scripts/client/public/js/product.js
+++ b/scripts/client/public/js/product.js
@@ -172,26 +172,31 @@ function appendData(data, target) {
}
if (target=='queryResultProduct') {
mainContainer.innerHTML +=
- '<div class="card" id='+ data[i].product_id+' onclick="rerouteproduct(this.id)"> \
- <img src="/../public/assets/images/' + data[i].image + '" class="cardImage"> \
+ `<div class="card" onclick="rerouteproduct(${data[i].product_id})"> \
+ <div class="cardImage"> \
+ ${data[i].image.includes('.mp4') ?
+ `<video src="/public/assets/videos/${data[i].image}" alt="Product Image" autoplay loop muted></video>` :
+ `<img src="/public/assets/images/${data[i].image}" alt="Product Image">`
+ }
+ </div> \
<div class="productdesc"> \
<div class="stockCategory"> \
<div class="category"> \
- <img src="/public/images/category.png" class="cardIcon">'
- + data[i].category_name +
- '</div> \
+ <img src="/public/images/category.png" class="cardIcon">
+ ${data[i].category_name}
+ </div> \
<div class="stock"> \
- <img src="/public/images/quantity.png" class="cardIcon">'
- + data[i].stock +
- '</div> \
+ <img src="/public/images/quantity.png" class="cardIcon">
+ ${data[i].stock}
+ </div> \
</div> \
- <div class="productTitle">' + data[i].product_name + '</div> \
- <div class="price">' + data[i].price.toLocaleString("id-ID", {
+ <div class="productTitle"> ${data[i].product_name} </div> \
+ <div class="price"> ${data[i].price.toLocaleString("id-ID", {
style: "currency",
currency: "IDR",
- }); + '</div> \
+ })}</div> \
</div> \
- </div>';
+ </div>`;
}
}
mainContainer.style.display = "flex";