try add session modal

public/assets/img/material-kit/grid.svg

@@ -0,0 +1,56 @@
+<svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <circle cx="12.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="0s" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
+        <animate attributeName="fill-opacity"
+         begin="100ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="300ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="52.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="600ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="800ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="52.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="400ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="12.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="700ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="500ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="200ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+</svg>

resources/views/includes/home.blade.php

@@ -1,9 +1,29 @@
-@extends ('layouts.indexfirst')
+@extends ('layouts.app')
 
 @section('content')
 
+<style>
+    .loader {
+        position: fixed;
+        top: 45%;
+        right: 50%;
+        width: 70px;
+        height: 70px;
+        border-top-color: white;
+        border-right-color: white;
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+        border-radius: 50%;
+        box-sizing: border-box;
+        z-index: 10000 !important;
+    }
+</style>
+
 <title>Home | Customer Portal</title>
 
+<!-- <div class="loader">
+    <img src="{{ asset('assets/img/material-kit/grid.svg') }}">
+</div> -->
 
 <div class="col-lg-4 col-md-6">
     <div class="card mt-5">
@@ -86,5 +106,12 @@
     </div>
 </div>
 
+<!-- <script>
+    $(function() {
+        setTimeout(() => {
+            $(".loader").fadeOut(1000);
+        }, 500)
+    })
+</script> -->
 
 @endsection

resources/views/includes/main/head.blade.php

@@ -12,6 +12,7 @@
 <link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
 <link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
 <script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
+<script src="{{ asset('argon') }}/js/ifvisible.js"></script>
 
 
 <!-- Font Awesome Icons -->

resources/views/layouts/indexfirst.blade.php

@@ -2,11 +2,62 @@
 <!DOCTYPE html>
 <html lang="en" itemscope itemtype="http://schema.org/WebPage">
 
+
 <head>
     @include('includes.main.head')
 </head>
 
+<script>
+    ifvisible.setIdleDuration(100);
+    // ifvisible.idle(function(){
+    //     $('#sessionModal').modal('show');
+    //     console.log('sessionmodalshow');
+    // });
+</script>
+
+<script>
+    var timeLeft = 30;
+    var elem = document.getElementById('seconds');
+    var timerId;
+
+
+    // ifvisible.on("focus", function(){
+    //     clearTimeout(timerId);
+    //     timeLeft = 30;
+    // });
+
+    $('#sessionModal').modal('show');
+
+    ifvisible.on("idle", function() {
+
+        timerId = setInterval(countdown, 1000);
+        $('#sessionModal').modal('show', {
+            backdrop: 'static',
+            keyboard: false
+        });
+    });
+
+
+    ifvisible.on("wakeup", function() {
+        clearTimeout(timerId);
+        timeLeft = 30;
+    });
+
+
+    function countdown() {
+        if (timeLeft == -1) {
+            clearTimeout(timerId);
+            $('#logout-form').submit();
+
+        } else {
+            document.getElementById("seconds").innerHTML = timeLeft;
+            timeLeft--;
+        }
+    }
+</script>
+
 <body class="about-us bg-gray-200">
+    @include('modal.sessionmodal')
     @include('includes.main.navigation')
     @include('includes.main.header')
     <div class="card card-body shadow-xl mx-3 mx-md-4 mt-n6">
@@ -21,4 +72,8 @@
     @include('includes.main.footerwhite')
 </body>
 
+
+
+
+
 </html>