fix auto tawarruq > 80 layout

2023-11-29 14:10:58 +08:00
parent 30f718e7d4
commit c3d9fbe526
4 changed files with 330 additions and 31 deletions
@@ -0,0 +1,119 @@
+
+<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>