initial commit: package listing view page

This commit is contained in:
Aqqil Azman
2024-05-23 09:11:01 +08:00
parent 75bff06385
commit d3f48bfe9e
@@ -0,0 +1,136 @@
<!doctype html>
<html lang="en">
<head>
<title>Package List</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<header>
<!-- place navbar here -->
</header>
<main>
<div class="container p-3">
<div class="row mb-3">
<div class="col-md-8">
<div class="border p-5 h3">ID:</div>
<!-- For loop here for multiple package -->
<div class="border p-3 mt-3">
<div class="row">
<div class="col-md-4">
<div class="p-2">
<div class="fw-bold">Package ID:</div>
<div>AWS27897BB5</div>
<div class="fw-bold mt-3">Package Size:</div>
<div>25x25x25 CM / 25KG</div>
</div>
</div>
<div class="col-md-4">
<div class="p-2">
<div class="fw-bold">Delivery Address:</div>
<div>3-05-12, Lorem Ipsum, Magnum Opus</div>
<div class="fw-bold mt-3">Delivery Estimation:</div>
<div>05/12/2026</div>
</div>
</div>
<div class="col-auto p-5">
<div>Shipping Cost:</div>
<div class="h4">
$6969
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="border p-4">
<div class="fw-bold mb-3">Discount Code</div>
<div class="input-group">
<input
type="text"
class="form-control"
name=""
id=""
aria-describedby="helpId"
placeholder="MAR05"
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Remove</button>
</div>
</div>
</div>
<div class="row">
<div class="col ">
<div class="border p-4 mt-3">
<div class="h5">Shipping Cost Estimation</div>
<div class="mt-3">
<div>Shipping Cost:</div>
<div>SST(6%):</div>
<div>Discount:</div>
</div>
<div class="mt-3">
<div>Total Cost:</div>
<div></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-check m-1">
<label class="form-check-label" for="">
<small>
Group my products with same destination
<br>
You will get grouped package at once if possible
</small>
</label>
<input class="form-check-input mt-3" type="checkbox" value="" id="" />
</div>
<div class="mt-3">
<div class="d-grid gap-2">
<button
type="button"
name=""
id=""
class="btn btn-primary"
>
Checkout
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<!-- place footer here -->
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"
></script>
</body>
</html>