Hafifie PKB
119 lines
3.6 KiB
PHP
119 lines
3.6 KiB
PHP
|
|
<style>
|
|
/* Button used to open the chat form - fixed at the bottom of the page */
|
|
.open-button {
|
|
background-color: #555;
|
|
color: white;
|
|
padding: 16px 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
position: fixed;
|
|
bottom: 23px;
|
|
right: 28px;
|
|
width: 100px;
|
|
}
|
|
|
|
/* The popup chat - hidden by default */
|
|
.chat-popup {
|
|
position: fixed;
|
|
bottom: -500px;
|
|
right: 15px;
|
|
border: 3px solid #f1f1f1;
|
|
z-index: 9;
|
|
transition: 1s;
|
|
}
|
|
|
|
/* Add styles to the form container */
|
|
.form-container {
|
|
/* max-width: 500px; */
|
|
padding: 10px;
|
|
background-color: white;
|
|
}
|
|
|
|
/* Full-width textarea */
|
|
.form-container textarea {
|
|
width: 100%;
|
|
padding: 15px;
|
|
margin: 5px 0 22px 0;
|
|
border: none;
|
|
background: #f1f1f1;
|
|
resize: none;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* When the textarea gets focus, do something */
|
|
.form-container textarea:focus {
|
|
background-color: #ddd;
|
|
outline: none;
|
|
}
|
|
|
|
/* Set a style for the submit/send button */
|
|
.form-container .btn {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 16px 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
margin-bottom:10px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Add a red background color to the cancel button */
|
|
.form-container .cancel {
|
|
background-color: red;
|
|
}
|
|
|
|
/* Add some hover effects to buttons */
|
|
.form-container .btn:hover, .open-button:hover {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<button class="open-button" onclick="openForm()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="chat-popup" id="myForm">
|
|
<form class="form-container">
|
|
<h1>Calculator</h1>
|
|
|
|
<label for="calcamaun"><b>Amaun Pelanggan</b></label>
|
|
<input id="calcamaun" class="form-control" placeholder="Amaun" name="calcamaun" required/>
|
|
<label for="calcbayar"><b>Amaun Dibayar</b></label>
|
|
<input id="calcbayar" class="form-control" placeholder="Amaun" name="calcbayar" disabled value="0.00"/>
|
|
<label for="calcbaki"><b>Baki</b></label>
|
|
<input id="calcbaki" class="form-control" name="calcbaki" disabled value="0.00"/>
|
|
|
|
<button type="button" class="btn" onclick="kirafunc()">Kira</button>
|
|
<button type="button" class="btn cancel" onclick="closeForm()">Tutup</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function kirafunc(){
|
|
let amaun = $('#calcamaun').val();
|
|
let bayar = $('#calcbayar').val();
|
|
let total = 0;
|
|
|
|
total = amaun - bayar;
|
|
|
|
$('#calcbaki').val(formatter.format(total));
|
|
|
|
}
|
|
|
|
function openForm() {
|
|
document.getElementById("myForm").style.bottom = "0";
|
|
// document.getElementById("myForm").style.display = "block";
|
|
}
|
|
|
|
function closeForm() {
|
|
$('#calcamaun').val('');
|
|
$('#calcbaki').val('0.00');
|
|
document.getElementById("myForm").style.bottom = "-500px";
|
|
// document.getElementById("myForm").style.display = "none";
|
|
}
|
|
</script> |