Add buffer page before loading the real index page
Trying to improve user perception of SLOW!
This commit is contained in:
Afiq Hamzah
@@ -0,0 +1,215 @@
|
||||
@extends ('layouts.indexfirst')
|
||||
|
||||
@push('additional_styles')
|
||||
<style>
|
||||
.card.shadow {
|
||||
background-color: #ffffff;
|
||||
/* Lighter background */
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
|
||||
/* Increased shadow */
|
||||
border: none;
|
||||
/* Remove border if present */
|
||||
}
|
||||
|
||||
.card-body.disabled {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
/* Lighter disabled background */
|
||||
pointer-events: none;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
border-radius: 0.25rem;
|
||||
/* Match card border-radius if needed */
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.pulsating-dot {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #006400;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 0 rgba(255, 215, 0, 1);
|
||||
animation: pulse-green 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(0, 100, 0, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 20px rgba(0, 100, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(0, 100, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.loader p {
|
||||
margin-top: 15px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fancy-text {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #2D7349;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dots span {
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
animation: dots 1.4s infinite;
|
||||
}
|
||||
|
||||
.dots span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dots span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<title>Home | Portal Pelanggan</title>
|
||||
|
||||
<div class="row mt-n9 top-0">
|
||||
<x-dashboard-card title="Jum. Pembiayaan Semasa" :subtitle=$total icon="fas fa-chart-pie" icon-state='warning'
|
||||
:link="route('home')" />
|
||||
|
||||
<x-dashboard-card title="Bil Pembiayaan Semasa" :subtitle=$bilangan icon="fas fa-users" icon-state='success'
|
||||
:link="route('home')" />
|
||||
|
||||
<x-dashboard-card title="Bil Pembiayaan 6 Bulan Ke Atas" :subtitle=$sixMonths icon="fas fa-chart-bar"
|
||||
:link="route('home', ['filter' => 'pembiayaan-6-bulan'])" />
|
||||
|
||||
<x-dashboard-card title="Bil Pembiayaan Akan Dilelong" :subtitle=$bilanganLelong icon="fas fa-gavel"
|
||||
icon-state='info' card-background-state="{{ $bilanganLelong > 0 ? 'crimson' : 'white' }}" :link="route('home', ['filter' => 'pembiayaan-akan-dilelong'])" />
|
||||
</div>
|
||||
|
||||
<form method="post" id="formtable" action="{{ route('payment.action') }}">
|
||||
@csrf
|
||||
|
||||
@error('totalSagInCartInput')
|
||||
<script>
|
||||
$.notify({
|
||||
icon: 'fas fa-exclamation-triangle fa-2x',
|
||||
newest_on_top: true,
|
||||
message: "<strong style='font-size:15px;'>{{ $message }}</strong>"
|
||||
}, {
|
||||
type: 'danger',
|
||||
allow_dismiss: false,
|
||||
placement: {
|
||||
align: 'center',
|
||||
from: 'bottom'
|
||||
},
|
||||
animate: {
|
||||
enter: 'animate__animated animate__bounce',
|
||||
|
||||
exit: 'animate__animated animate__bounceOutDown'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@enderror
|
||||
|
||||
@if (\Session::has('error'))
|
||||
<script>
|
||||
Swal.fire(
|
||||
// "Melebihi tempoh 12 Bulan.",
|
||||
"Akan/Telah Tamat Kontrak 12 Bulan.",
|
||||
"{{ \Session::get('error') }}",
|
||||
'warning'
|
||||
)
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@if (\Session::has('errorsagonline'))
|
||||
<script>
|
||||
Swal.fire(
|
||||
"Pembayaran Terdahulu Dalam Proses.",
|
||||
"{{ \Session::get('errorsagonline') }}",
|
||||
'warning'
|
||||
)
|
||||
</script>
|
||||
@endif
|
||||
<br>
|
||||
|
||||
@if (request()->get('filter') == 'pembiayaan-akan-dilelong')
|
||||
<x-dashboard-notification>
|
||||
<x-dashboard-notification.item
|
||||
content="1. Sekiranya Lelongan Anda Dalam Tempoh Kontrak Lanjutan (Mencapai 12 Bulan), Urusan Penebusan Hanya Dibenarkan Di Kaunter Cawangan Selewatnya-lewatnya 3 Hari Sebelum Tarikh Lelong." />
|
||||
<x-dashboard-notification.item
|
||||
content="2. Transaksi Pembayaran Hanya Dibenarkan Selewat-lewatnya 3 Hari Sebelum Lelongan." />
|
||||
<x-dashboard-notification.item
|
||||
content="(Contoh: Tarikh Lelong: 21-02-2023, Pembayaran/Penebusan Hanya dibenarkan Sehingga Tarikh 18-02-2023 Sahaja)" />
|
||||
</x-dashboard-notification>
|
||||
@else
|
||||
<x-dashboard-notification>
|
||||
<x-dashboard-notification.item
|
||||
content="1. Sila Buat Penebusan Di Kaunter Jika Tempoh Telah Mencapai 12 Bulan!" />
|
||||
<x-dashboard-notification.item content="2. Sila 'Tick' Kotak No Rujukan Yang Hendak Dibayar." />
|
||||
</x-dashboard-notification>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="card shadow">
|
||||
<div class="card-body disabled">
|
||||
<div class="loader">
|
||||
<div class="pulsating-dot"></div>
|
||||
<p class="fancy-text">Data sedang dimuat<span
|
||||
class="dots"><span>.</span><span>.</span><span>.</span></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button type="submit" class="btn btn-primary btn-disabled" disabled><span class="mr-3">Seterusnya</span>
|
||||
<span class="badge alert-warning text-dark font-weight-bold" style="font-size:12px;" id="totalsag">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
window.location.href = '{{ $homeUrl }}';
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -29,6 +29,8 @@
|
||||
<link href="{{ asset('css/material-kit.css') }}" rel="stylesheet">
|
||||
<!-- <link href="{{ asset('css/loader.css') }}" rel="stylesheet"> -->
|
||||
|
||||
@stack('additional_styles')
|
||||
|
||||
<style>
|
||||
.bg-crimson {
|
||||
background-color: crimson;
|
||||
|
||||
Reference in New Issue
Block a user