76 lines
4.1 KiB
PHP
76 lines
4.1 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<div class="container overflow-hidden">
|
|
<div class="row min-vh-100 align-items-center justify-content-center">
|
|
<div class="col-md-10 col-lg-8 text-center position-relative">
|
|
<!-- Large Decorative background 404 -->
|
|
<div class="position-absolute top-50 start-50 translate-middle z-0 opacity-5 d-none d-md-block" style="font-size: 20rem; font-weight: 900; letter-spacing: -0.5rem; pointer-events: none; user-select: none;">
|
|
404
|
|
</div>
|
|
|
|
<div class="position-relative z-1 py-5">
|
|
<div class="mb-5 floating-animation">
|
|
<!-- Custom SVG Illustration instead of icons for better reliability -->
|
|
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto shadow-sm p-4 rounded-circle bg-white border border-light">
|
|
<path d="M100 0C44.7715 0 0 44.7715 0 100C0 155.228 44.7715 200 100 200C155.228 200 200 155.228 200 100C200 44.7715 155.228 0 100 0ZM100 185C53.0558 185 15 146.944 15 100C15 53.0558 53.0558 15 100 15C146.944 15 185 53.0558 185 100C185 146.944 146.944 185 100 185Z" fill="#00C853" fill-opacity="0.1"/>
|
|
<circle cx="100" cy="100" r="70" fill="#00C853" fill-opacity="0.05"/>
|
|
<path d="M100 60V110" stroke="#00C853" stroke-width="12" stroke-linecap="round"/>
|
|
<circle cx="100" cy="135" r="8" fill="#00C853"/>
|
|
<path d="M60 85L50 95M140 85L150 95" stroke="#00C853" stroke-width="8" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="display-3 fw-bold mb-3 text-dark"><?php echo __('404_title'); ?></h1>
|
|
<p class="text-muted fs-5 mb-5 max-width-600 mx-auto px-3">
|
|
<?php echo __('404_text'); ?>
|
|
</p>
|
|
|
|
<div class="d-flex flex-column flex-sm-row gap-3 justify-content-center align-items-center mb-5 px-3">
|
|
<a href="/" class="btn btn-success btn-lg rounded-pill px-5 py-3 shadow-sm hover-lift d-flex align-items-center w-100 w-sm-auto">
|
|
<i class="bi bi-house-door-fill me-2"></i>
|
|
<span class="fw-bold"><?php echo __('back_to_home'); ?></span>
|
|
</a>
|
|
<button onclick="window.history.back()" class="btn btn-outline-dark btn-lg rounded-pill px-5 py-3 hover-lift d-flex align-items-center w-100 w-sm-auto">
|
|
<i class="bi bi-arrow-left me-2"></i>
|
|
<span class="fw-bold"><?php echo __('Kembali', 'Kembali'); ?></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-5 p-4 bg-white rounded-5 shadow-sm border border-light-subtle max-width-500 mx-auto mx-3">
|
|
<p class="text-muted small fw-medium mb-3"><?php echo __('search_placeholder'); ?></p>
|
|
<form action="/" method="GET">
|
|
<div class="input-group bg-light rounded-pill p-1 border">
|
|
<span class="input-group-text bg-transparent border-0 ps-3">
|
|
<i class="bi bi-search text-muted small"></i>
|
|
</span>
|
|
<input type="text" name="search" class="form-control bg-transparent border-0 py-2 fs-6" placeholder="<?php echo __('search', 'Search...'); ?>">
|
|
<button class="btn btn-success rounded-pill px-4 fw-bold" type="submit"><?php echo __('search'); ?></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.max-width-600 {
|
|
max-width: 600px;
|
|
}
|
|
.max-width-500 {
|
|
max-width: 500px;
|
|
}
|
|
.bg-light {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
.shadow-sm {
|
|
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.display-3 {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<?php include 'footer.php'; ?>
|