erahn-click/resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Ar-Rahn Panel') }}</title>
    <!-- Favicon -->
    <link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <!-- Extra details for Live View on GitHub Pages -->

    <script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>


    <!-- Icons -->
    <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
    <link href="{{ asset('argon') }}/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <!-- Argon CSS -->
    <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/> --}}
    <script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <script src="{{ asset('argon') }}/js/ifvisible.js"></script>
    <script src="{{ asset('argon') }}/js/jquery.backDetect.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    {{-- <script type="text/javascript" src="{{ asset('argon') }}/js/dataTables.dataTables.min.js"></script> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="{{ asset('argon') }}/js/bootstrap-notify.js"></script>

    <script>
        ifvisible.setIdleDuration(5000);

        // ifvisible.idle(function(){
        //     $('#sessionModal').modal('show');
        //     console.log('sessionmodalshow');
        // });
    </script>
    <style>
        div.checker span {
            background-image: url("assets/global/plugins/uniform/images/sprite.png");
        }

        .user-login-5 .login-container>.login-footer .login-social {
            padding-left: 0 !important;
        }

        .login-logo {
            margin-top: 50px;
            width: 50%;
            height: 50%;
        }

        @media (max-width: 1023px) {
            .user-login-5 .login-logo.login-6 {
                margin: 0;
            }

            .user-login-5 .login-logo.login-6 {
                left: 7%;
            }

            .user-login-5 .login-container>.login-content .login-form {
                margin-top: 0 !important;
            }
        }

        .form-styling {
            width: 100%;
            height: 50px;
            padding-left: 15px;
            border: grey solid 2px;
            border-radius: 35px;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, .2);
        }

        .labelcool {
            font-weight: 600;
            text-transform: uppercase;
            font-size: 13px;
            padding-left: 10px;
            /* padding-bottom: 10px; */
            /* color: rgba(255,255,255,.7); */
            text-align: left;
            color: black;
            display: block;
        }

        .buttonberjaya {
            border-radius: 20px;
            height: 50px;
            background-color: #009432;
            color: white;
            font-weight: bold;
            border-color: #357ebd !important;
        }

        /* .btn-primary {
            color: #fff !important;
            background-color: #282460 !important;
            border-color: #357ebd !important;
        }

        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active,
        .btn-primary.active {
            color: #385d8a !important;
            background-color: #3598dc !important;
            border-color: #3598dc !important;
        } */

        /* body {
            font-family: "Noto Sans", sans-serif !important;
        } */

        .modalloading {
            border: none !important;
        }

        .modal-dialog-loading {
            text-align: center;
            position: fixed;
            top: 30%;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .login-bg {
            /* position:fixed; */
            /* left:50.5%; */
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 100vh;
            max-height: 100%;
            max-width: 100%;
        }

        * {
            box-sizing: border-box;
        }

        .mySlides {
            display: none;
        }

        img {
            vertical-align: middle;
        }

        /* Slideshow container */
        .slideshow-container {
            max-width: 100%;
            position: relative;
            margin: auto;
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        .headtext {
            color: yellow;
            font-size: 40px;
            padding: 20px 12px;
            position: absolute;
            font-weight: bold;
            top: 20%;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        /* .active {
        background-color: #717171;
        } */

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
            .text {
                font-size: 11px
            }
        }

        /* Loader */

        #background {
            width: 100%;
            height: 100%;
            position: fixed;
            overflow: hidden;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, 0.5);
            ;
            opacity: 0.5;
            z-index: 1;
        }

        #container {
            width: 70px;
            height: 35px;
            overflow: hidden;
            position: absolute;
            top: calc(50% - 17px);
            left: calc(50% - 35px);
        }

        #loader {
            position: fixed;
            top: 45%;
            right: 50%;
            width: 70px;
            height: 70px;
            border-style: solid;
            border-top-color: white;
            border-right-color: white;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-radius: 50%;
            box-sizing: border-box;
            animation: rotate 3s ease-in-out infinite;
            transform: rotate(-200deg)
        }

        @keyframes rotate {
            0% {
                border-width: 10px;
            }

            25% {
                border-width: 3px;
            }

            50% {
                transform: rotate(115deg);
                border-width: 10px;
            }

            75% {
                border-width: 3px;
            }

            100% {
                border-width: 10px;
            }
        }
    </style>


</head>

<body class="{{ $class ?? '' }}">
    @auth()

    <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--;
            }
        }

        // if (document.addEventListener) {
        // window.addEventListener('pageshow', function (event) {
        //     if (event.persisted || window.performance && window.performance.navigation.type == 2) 
        //     {
        //         $('#logout-form').submit();
        //         // location.reload();
        //     }
        // },
        // false);
        // }
    </script>

    @if(Auth::user()->hasVerifiedEmail())
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
    @include('layouts.navbars.sidebar')
    @endif
    @endauth

    <div class="main-content">
        @include('layouts.navbars.navbar')
        @include('modal.sessionmodal')
        @yield('content')

        <div id="background" class="animate__animated animate__fadeIn" style="display: none;">
            <div id="container">
                <div id="loader"></div>
            </div>
        </div>

    </div>

    @guest()
    {{-- @include('layouts.footers.guest') --}}
    @endguest


    @stack('js')

    <!-- Argon JS -->
    <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
</body>

</html>