121 lines
3.6 KiB
PHP
121 lines
3.6 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title = '403 Forbidden';
|
|
$subTitle = 'Akses Ditolak';
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="row justify-content-center min-vh-100 align-items-center">
|
|
<div class="col-lg-6 col-md-8 col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-5 text-center">
|
|
<!-- Error Icon -->
|
|
<div class="mb-4">
|
|
<div class="error-icon-wrapper d-inline-block position-relative">
|
|
<iconify-icon icon="lucide:shield-x" class="error-icon text-danger"></iconify-icon>
|
|
<div class="pulse-ring"></div>
|
|
<div class="pulse-ring-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="mb-4">
|
|
<h1 class="display-1 fw-bold text-danger mb-3">403</h1>
|
|
<h3 class="fw-semibold mb-3 text-dark">Akses Ditolak</h3>
|
|
<p class="text-muted mb-2">Anda tidak memiliki izin untuk mengakses halaman ini.</p>
|
|
<p class="text-muted small">Silakan hubungi administrator jika diperlukan.</p>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<div class="d-flex flex-row justify-content-center">
|
|
<a href="{{ route('dashboard.index') }}" class="btn btn-primary px-4 py-2 d-flex align-items-center justify-content-center">
|
|
<iconify-icon icon="lucide:home" class="me-2"></iconify-icon>
|
|
<span>Kembali ke Dashboard</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('css')
|
|
<style>
|
|
.error-icon-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 64px;
|
|
animation: shake 2s ease-in-out infinite;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.pulse-ring, .pulse-ring-2 {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 2px solid #dc3545;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: pulsate 2s ease-out infinite;
|
|
opacity: 0;
|
|
}
|
|
|
|
.pulse-ring-2 {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
|
|
20%, 40%, 60%, 80% { transform: translateX(3px); }
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.error-icon {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.pulse-ring, .pulse-ring-2 {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.display-1 {
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endsection
|