92 lines
3.1 KiB
HTML
92 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Title -->
|
|
<title>Quantity Counter</title>
|
|
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../../../favicon.ico">
|
|
|
|
<!-- Google Fonts -->
|
|
<!-- Font -->
|
|
<link rel="preload" href="../../assets/vendor/inter-font-family/Inter-Regular.woff2" as="font">
|
|
<link rel="preload" href="../../assets/vendor/inter-font-family/Inter-SemiBold.woff2" as="font">
|
|
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../../../assets/vendor/font-awesome/css/all.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../../../assets/css/theme.css">
|
|
</head>
|
|
<body>
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- Quantity -->
|
|
<div class="border rounded py-2 px-3 mb-3">
|
|
<div class="js-quantity-counter row align-items-center">
|
|
<div class="col-7">
|
|
<small class="d-block text-body font-weight-bold">Select quantity</small>
|
|
<input class="js-result form-control h-auto border-0 rounded p-0" type="text" value="1">
|
|
</div>
|
|
<div class="col-5 text-right">
|
|
<a class="js-minus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
|
|
<i class="fas fa-minus"></i>
|
|
</a>
|
|
<a class="js-plus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Quantity -->
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- Quantity -->
|
|
<div class="border rounded py-2 px-3 mb-3">
|
|
<div class="js-quantity-counter row align-items-center">
|
|
<div class="col-7">
|
|
<small class="d-block text-body font-weight-bold">Select quantity</small>
|
|
<input class="js-result form-control h-auto border-0 rounded p-0" type="text" value="5">
|
|
</div>
|
|
<div class="col-5 text-right">
|
|
<a class="js-minus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
|
|
<i class="fas fa-minus"></i>
|
|
</a>
|
|
<a class="js-plus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
|
|
<i class="fas fa-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Quantity -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<script src="../../../assets/vendor/jquery/dist/jquery.min.js"></script>
|
|
<script src="../../../assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
|
<script src="../../../assets/vendor/popper.js/dist/umd/popper.min.js"></script>
|
|
<script src="../../../assets/vendor/bootstrap/bootstrap.min.js"></script>
|
|
|
|
<script src="./dist/hs-quantity-counter.min.js"></script>
|
|
|
|
<script>
|
|
$(document).on('ready', function () {
|
|
$('.js-quantity-counter').each(function () {
|
|
var quantityCounter = new HSQuantityCounter($(this)).init();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|