fix skit2

resources/views/homepage/khazanah/home.blade.php

@@ -153,8 +153,36 @@
     </div>
   </div>
 
+
+  <div class="notify-petibesi max">
+    <div class="toast-content max">
+       <i class="fas fa-exclamation check"></i>
+       <div class="message">
+         <span class="text text-1">Baki Maksimum</span>
+         <span class="text text-2">Baki peti besi melebihi RM 150,000.00</span>
+        </div>
+         <i class="fas fa-times close"></i>
+         <div class="progress"></div>
+    </div>
+  </div>
+
+  {{-- <div class="notify-petibesi min">
+    <div class="toast-content min">
+       <i class="fas fa-exclamation check"></i>
+       <div class="message">
+         <span class="text text-1">Baki Minimum</span>
+         <span class="text text-2">Baki peti besi melebihi RM 150,000.00</span>
+        </div>
+         <i class="fas fa-times close"></i>
+         <div class="progress"></div>
+    </div>
+  </div> --}}
+  
+
 <div class="container">
 
+  <button id="showbutton">Click</button>
+
     <div class="row justify-content-center" style="margin-top:60px;">
         <div class="col-md-12">
             
@@ -495,7 +523,7 @@
 
       function simpanfunc()
       {
-	console.log('simpan');
+	// console.log('simpan');
         //Swal.fire({
         //      title: 'Adakah anda pasti untuk mengemaskini denominasi?',
         //      text: "Sila pastikan denominasi anda betul!",
@@ -749,6 +777,20 @@
             
       }
 
+      // function clickedbutton(){
+      //   const button = $('#show').val();
+      // }
+
+      $("#showbutton").click(function(){
+        // alert("The paragraph was clicked.");
+        $(".notify-petibesi").addClass("active");
+      });
+
+      $(".close").click(function(){
+        // alert("The paragraph was clicked.");
+        $(".notify-petibesi").removeClass("active");
+      });
+
 
 </script>
 @endsection

resources/views/layouts/app.blade.php

@@ -75,6 +75,100 @@
             align-items: flex-start !important;
         }
 
+        .notify-petibesi.max{
+            position: absolute;
+            bottom:50px;
+            right: 30px;
+            border-radius:12px;
+            background: #fff;
+            padding: 20px 35px 20px 25px;
+            box-shadow:0 5px 10px rgba(0,0,0,0.1);
+            border-left: 6px solid #e67e22;
+            z-index:1;
+            display:none;
+            -webkit-transition: opacity 600ms, visibility 600ms;
+            transition: opacity 600ms, visibility 600ms;
+        }
+
+        .notify-petibesi.min{
+            position: absolute;
+            bottom:50px;
+            right: 30px;
+            border-radius:12px;
+            background: #fff;
+            padding: 20px 35px 20px 25px;
+            box-shadow:0 5px 10px rgba(0,0,0,0.1);
+            border-left: 6px solid #e74c3c;
+            z-index:1;
+            display:none;
+            -webkit-transition: opacity 600ms, visibility 600ms;
+            transition: opacity 600ms, visibility 600ms;
+        }
+
+        .notify-petibesi.active{
+            display:block;
+        }
+
+        .notify-petibesi .toast-content{
+            display:flex;
+            align-items:center;
+        
+        }
+
+        .toast-content .message{
+            display:flex;
+            flex-direction: column;
+            margin: 0 20px;       
+        }
+
+        .toast-content.max .check{
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            height:35px;
+            width:35px;
+            background-color:#e67e22;
+            color:#fff;
+            font-size:20px;
+            border-radius:50%; 
+        }
+
+        .toast-content.min .check{
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            height:35px;
+            width:35px;
+            background-color:#e74c3c;
+            color:#fff;
+            font-size:20px;
+            border-radius:50%; 
+        }
+
+        .message .text{
+            font-size:20px;
+            font-weight:400;
+            color:#666666;
+        }
+
+        .message .text.text-1{
+            font-weight:600;
+            color:#333;
+        }
+        
+        .notify-petibesi .close{
+            position:absolute;
+            top:10px;
+            right:15px;
+            padding:5px;
+            cursor:pointer;
+            opacity:0.7;
+        }
+
+        .notify-petibesi .close:hover{
+            opacity:1;
+        }
+
     </style>
 
 </head>