Skip to content
Snippets Groups Projects
Commit a238ce3d authored by Christophorus Dharma Winata's avatar Christophorus Dharma Winata
Browse files

feat: make-purchase prototype

parent b82a7cf7
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/css/make-purchase.css 0 → 100644
+ 143
− 0
View file @ a238ce3d
@import url('https://fonts.googleapis.com/css?family=Inter');
*{
margin: 0;
padding: 0;
font-family: Inter;
box-sizing: border-box;
transition: 0.5;
}
.container{
max-width: 100%;
height: 100vh;
mix-blend-mode: multiply;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
}
.purchaseform-group {
flex: 1 1 auto;
position: relative;
padding-top: 5vh;
min-width: 300px;
display: flex;
flex-direction: column;
margin-left: 10%;
margin-right: 10%;
}
.purchaseform-group h1 {
font-size: 30px;
padding-bottom: 10px;
}
#price-criteria, #quantity-criteria {
text-align : left;
font-size : small;
color: red;
padding-left: 10px;
/* color : #ffffffab; */
}
@media screen and ((max-width: 600px)) {
.input-group{
display: flex;
flex-direction: column;
}
}
#purchaseform {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.input-group {
display: flex;
flex: 1 1 auto;
}
.input-image-field {
width: 25vw;
max-height: 25vw;
display: inline-flex;
flex-direction: column;
border-radius: 10px;
transition: max-height 0.5s;
}
.input-text-fields {
flex: 1 1 auto;
padding: 10px;
display: flex;
flex-direction: column;
}
.input-field {
margin: 10px;
border-radius: 10px;
align-items: center;
background-color: #eaeaea;
transition: max-height 0.5s;
overflow: hidden;
color: black ;
}
#product_description-field{
display: flex;
}
#product_description {
flex: 1 1 auto;
resize:vertical;
background-color: transparent;
padding: 10px;
font-size: small;
border-color: transparent;
}
.input-field ::placeholder {
color: black;
}
/* #product_image {
background-color: azure;
} */
.input-field input {
width: 100%;
padding: 18px;
border-color: transparent;
}
.button-field {
width: 100%;
margin-top: 4vh;
display: flex;
flex-direction: row-reverse;
}
.button-field button{
/* flex-basis: 48%; */
min-width: 25%;
height: 5vh;
border-color: transparent;
margin-right: 15px;
/* margin-bottom: 15px; */
background: #3c00a0;
color: #fff;
border-radius: 10px;
font-size: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
#image-preview {
background-color: azure;
width: 24vw;
max-height: 24vw;
}
\ No newline at end of file
client/js/catalog.js
+ 6
− 1
View file @ a238ce3d
......@@ -53,6 +53,11 @@ nextPage = () => {
}
}
function redirectToPurchase() {
location.href = "";
localStorage.setItem()
}
function changePage(page){
var btnNext = document.getElementById("btnNext");
var btnPrev = document.getElementById("btnPrev");
......@@ -91,7 +96,7 @@ function changePage(page){
listingTable.innerHTML ="";
for (var i = 0; i < 10 && itemList.length ; i++){
listingTable.innerHTML += `<button class="showItem">
listingTable.innerHTML += `<button class="showItem" onclick = "redirectToPurchase()">
<img id="${itemList[i][0]}" src="../image/${itemList[i][2]}" alt="${itemList[i][1]}">
<p>${itemList[i][1]}</p>
<p>Rp${itemList[i][4]}</p>
......
client/pages/make-purchase.html 0 → 100644
+ 58
− 0
View file @ a238ce3d
<?php session_start();
require_once "../../server/controllers/loggedout_catch.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Make Purchase</title>
<link rel="stylesheet" href="../css/make-purchase.css">
<link rel="stylesheet" href="../css/navbar.css">
<script src="../js/navbar.js"></script>
<script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
<script src="../js/make-purchase.js"></script>
</head>
<body>
<div class="container">
<div class="tabgroup" id="tabgroup">
<script>addnavbar();</script>
</div>
<div class="purchaseform-group">
<h1 id="title">Make A Purchase</h1>
<form id="purchaseform">
<div class="input-group">
<div class="input-image-field">
<img src="../image/no_picture.jpeg" id="image-preview" alt="">
</div>
<div class="input-text-fields">
<div class="input-field">
<input type="text" id="product_name" placeholder="Product Name" disabled>
</div>
<div class="input-field" id="product_description-field">
<textarea type="text" id="product_description" placeholder="Product Description" disabled></textarea>
</div>
<div class="input-field" id="product_price-field">
<input type="text" id="product_price" placeholder="Price" oninput="checkNumericPrice()" disabled>
</div>
<p id="price-criteria"> </p>
<div class="input-field" id="product_quantity-field">
<input type="text" id="product_quantity" placeholder="Quantity" oninput="checkNumericQuantity()" required>
</div>
<p id="quantity-criteria"> </p>
</div>
</div>
<div class="button-field">
<button type="button" id="purchasesubmit" onclick="submitPurchase()">Done</button>
</div>
</form>
</div>
<div class="sidebar" id="sidebar">
<script>
addsidebar();
</script>
</div>
</div>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment