131 lines
5.8 KiB
PHP
131 lines
5.8 KiB
PHP
@php
|
|
$appName = \App\Models\Setting::getValue('app_name', config('app.name', 'Aplikasi Ketertiban'));
|
|
$schoolName = \App\Models\Setting::getValue('school_name', 'SMKN 1 Wonorejo');
|
|
@endphp
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
<meta name="theme-color" content="#2563eb">
|
|
<title>{{ $code }} — {{ $appName }}</title>
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html, body { height:100%; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background:#ffffff; color:#1e293b;
|
|
display:flex; align-items:center; justify-content:center;
|
|
min-height:100vh; padding:32px 20px; position:relative; overflow-x:hidden;
|
|
}
|
|
/* dekorasi background biru sangat muda */
|
|
body::before, body::after {
|
|
content:''; position:fixed; border-radius:50%; z-index:0; pointer-events:none;
|
|
}
|
|
body::before {
|
|
width:460px; height:460px; background:rgba(219,234,254,.55);
|
|
top:-140px; right:-120px; filter:blur(20px);
|
|
}
|
|
body::after {
|
|
width:400px; height:400px; background:rgba(204,251,241,.5);
|
|
bottom:-130px; left:-100px; filter:blur(20px);
|
|
}
|
|
.page { width:100%; max-width:1040px; position:relative; z-index:1; }
|
|
.card {
|
|
display:grid; grid-template-columns:45fr 55fr; gap:40px; align-items:center;
|
|
background:#fff; border-radius:28px; padding:56px 52px;
|
|
box-shadow:0 30px 70px -20px rgba(30,58,138,.18);
|
|
border:1px solid #eef2f7;
|
|
}
|
|
/* ===== Kolom kiri: teks ===== */
|
|
.text-side { text-align:left; }
|
|
.code {
|
|
font-size:116px; font-weight:900; line-height:1; letter-spacing:1px;
|
|
color:#1e3a8a; font-variant-numeric:tabular-nums;
|
|
}
|
|
h1 { font-size:27px; font-weight:800; color:#0f172a; margin-top:6px; }
|
|
.divider {
|
|
width:56px; height:5px; border-radius:99px; background:#2563eb; margin:18px 0 16px;
|
|
}
|
|
p.desc { font-size:15.5px; line-height:1.75; color:#334155; max-width:400px; }
|
|
.actions { margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
|
|
.btn-primary {
|
|
display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:12px;
|
|
background:#2563eb; color:#fff; font-size:14.5px; font-weight:700; text-decoration:none;
|
|
box-shadow:0 10px 24px -8px rgba(37,99,235,.55); transition:.2s; border:0; cursor:pointer; font-family:inherit;
|
|
}
|
|
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(37,99,235,.6); }
|
|
.btn-link {
|
|
display:inline-flex; align-items:center; gap:8px; padding:6px 2px;
|
|
background:none; border:0; color:#1d4ed8; font-size:14px; font-weight:700; cursor:pointer;
|
|
text-decoration:none; font-family:inherit; transition:.2s;
|
|
}
|
|
.btn-link:hover { opacity:.75; }
|
|
/* ===== Kolom kanan: ilustrasi ===== */
|
|
.art-side { display:flex; justify-content:center; align-items:center; }
|
|
.art {
|
|
width:100%; max-width:460px; height:auto; object-fit:contain; display:block;
|
|
}
|
|
/* ===== Info box footer ===== */
|
|
.infobox {
|
|
margin-top:22px; display:flex; align-items:center; gap:14px;
|
|
background:#fff; border:1px solid #e2e8f0; border-radius:16px;
|
|
padding:15px 22px; box-shadow:0 10px 30px -18px rgba(30,58,138,.25);
|
|
}
|
|
.ico-info {
|
|
flex:0 0 auto; width:28px; height:28px; border-radius:50%;
|
|
background:#dbeafe; color:#2563eb; font-weight:800; font-size:15px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
}
|
|
.info-text { flex:1; font-size:13.5px; color:#334155; line-height:1.6; }
|
|
.ico-lock { flex:0 0 auto; color:#93c5fd; display:flex; }
|
|
/* ===== Responsif ===== */
|
|
@media (max-width:820px){
|
|
body { padding:24px 16px; }
|
|
.card { grid-template-columns:1fr; gap:18px; padding:30px 24px 26px; border-radius:22px; text-align:center; }
|
|
.text-side { text-align:center; display:flex; flex-direction:column; align-items:center; }
|
|
.actions { align-items:center; margin-top:24px; }
|
|
.divider { margin-left:auto; margin-right:auto; }
|
|
.code { font-size:84px; }
|
|
h1 { font-size:22px; }
|
|
p.desc { max-width:100%; }
|
|
.art { max-width:280px; }
|
|
.infobox { padding:13px 16px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="card">
|
|
<div class="text-side">
|
|
<div class="code">{{ $code }}</div>
|
|
<h1>{{ $title }}</h1>
|
|
<div class="divider"></div>
|
|
<p class="desc">{{ $message }}</p>
|
|
<div class="actions">
|
|
<a class="btn-primary" href="{{ url('/') }}">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>
|
|
Kembali ke Beranda
|
|
</a>
|
|
<button class="btn-link" type="button" onclick="history.length > 1 ? history.back() : location.href='/'">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
|
|
Kembali
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="art-side">
|
|
<img class="art" src="{{ asset('errors/' . $image) }}" alt="{{ $title }}" onerror="this.onerror=null;this.src='{{ asset('errors/placeholder.svg') }}'">
|
|
</div>
|
|
</div>
|
|
<div class="infobox">
|
|
<span class="ico-info">i</span>
|
|
<span class="info-text">Butuh bantuan? Hubungi administrator {{ $schoolName }} untuk informasi lebih lanjut.</span>
|
|
<span class="ico-lock">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|