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";