380 lines
8.9 KiB
PHP
380 lines
8.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>@yield('title')</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- FONT -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- ICON -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f1f5f9;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* SIDEBAR */
|
|
.sidebar {
|
|
width: 250px;
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
border-right: 1px solid #e5e7eb;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.sidebar h4 {
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #64748b !important;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
margin-bottom: 6px;
|
|
transition: 0.3s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: #f1f5f9;
|
|
color: #0ea5e9 !important;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: #0ea5e9 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* CONTENT */
|
|
.content {
|
|
background-color: #f1f5f9;
|
|
min-height: 100vh;
|
|
padding: 30px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* HEADER */
|
|
.topbar {
|
|
background: white;
|
|
border-radius: 14px;
|
|
padding: 15px 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.page-title {
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* CARD */
|
|
.card {
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* HERO */
|
|
.card-hero {
|
|
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
|
|
color: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.card-hero h2 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-hero p {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* TABLE */
|
|
.table {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* BUTTON */
|
|
.btn-primary {
|
|
background: #0ea5e9;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #0284c7;
|
|
}
|
|
|
|
/* MOBILE BUTTON */
|
|
.mobile-toggle{
|
|
display:none;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:768px){
|
|
|
|
.sidebar{
|
|
position: fixed;
|
|
left: -260px;
|
|
top: 0;
|
|
width: 250px;
|
|
height: 100%;
|
|
z-index: 999;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar.active{
|
|
left: 0;
|
|
}
|
|
|
|
.content{
|
|
width: 100%;
|
|
padding: 15px;
|
|
}
|
|
|
|
.topbar{
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.page-title{
|
|
font-size: 18px;
|
|
}
|
|
|
|
.table{
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mobile-toggle{
|
|
display:block;
|
|
}
|
|
|
|
.nav-link{
|
|
font-size:14px;
|
|
}
|
|
|
|
.card-hero{
|
|
padding:20px;
|
|
}
|
|
|
|
.card-hero h2{
|
|
font-size:24px;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="d-flex">
|
|
|
|
<!-- OVERLAY -->
|
|
<div id="sidebarOverlay"
|
|
style="
|
|
display:none;
|
|
position:fixed;
|
|
inset:0;
|
|
background:rgba(0,0,0,0.4);
|
|
z-index:998;
|
|
">
|
|
</div>
|
|
|
|
<!-- SIDEBAR -->
|
|
<div class="sidebar p-3">
|
|
|
|
<h4 class="text-center mb-3">TensiKu</h4>
|
|
<hr>
|
|
|
|
<ul class="nav flex-column">
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/dashboard') }}"
|
|
class="nav-link {{ request()->is('admin/dashboard') ? 'active' : '' }}">
|
|
<i class="fa fa-home me-2"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/pasien') }}"
|
|
class="nav-link {{ request()->is('admin/pasien') ? 'active' : '' }}">
|
|
<i class="fa fa-user me-2"></i> Data Pasien
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/gejala') }}"
|
|
class="nav-link {{ request()->is('admin/gejala*') ? 'active' : '' }}">
|
|
<i class="fa fa-stethoscope me-2"></i> Data Gejala
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/penyakit') }}"
|
|
class="nav-link {{ request()->is('admin/penyakit*') ? 'active' : '' }}">
|
|
<i class="fa fa-virus me-2"></i> Data Penyakit
|
|
</a>
|
|
</li>
|
|
|
|
{{--
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/rule') }}"
|
|
class="nav-link {{ request()->is('admin/rule*') ? 'active' : '' }}">
|
|
<i class="fa fa-project-diagram me-2"></i> Rule CF
|
|
</a>
|
|
</li>
|
|
--}}
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/edukasi') }}"
|
|
class="nav-link {{ request()->is('admin/edukasi*') ? 'active' : '' }}">
|
|
<i class="fa fa-book me-2"></i> Data Edukasi
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/admin/riwayat') }}"
|
|
class="nav-link {{ request()->is('admin/riwayat') ? 'active' : '' }}">
|
|
<i class="fa fa-history me-2"></i> Riwayat
|
|
</a>
|
|
</li>
|
|
|
|
<!-- LOGOUT -->
|
|
<li class="nav-item mt-4">
|
|
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
|
|
<button type="submit"
|
|
class="nav-link text-danger border-0 bg-transparent text-start w-100">
|
|
|
|
<i class="fa fa-sign-out-alt me-2"></i> Logout
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
|
|
<!-- TOPBAR -->
|
|
<div class="topbar d-flex justify-content-between align-items-center">
|
|
|
|
<div class="d-flex align-items-center gap-3">
|
|
|
|
<!-- TOGGLE -->
|
|
<button class="btn btn-primary mobile-toggle"
|
|
id="toggleSidebar">
|
|
|
|
<i class="fa fa-bars"></i>
|
|
|
|
</button>
|
|
|
|
<div>
|
|
|
|
<h5 class="page-title">
|
|
@yield('title')
|
|
</h5>
|
|
|
|
<div class="page-subtitle">
|
|
Sistem Pakar Diagnosa Penyakit Hipertensi
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
{{ auth()->user()->name ?? 'Admin' }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- HERO -->
|
|
@if(request()->is('admin/dashboard'))
|
|
|
|
<div class="card-hero mb-4">
|
|
|
|
<h2>Selamat Datang</h2>
|
|
|
|
<p>
|
|
Sistem pakar membantu melakukan deteksi dini perlunya
|
|
pemeriksaan hipertensi berdasarkan gejala yang dialami
|
|
menggunakan metode Certainty Factor.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
@endif
|
|
|
|
<!-- CONTENT -->
|
|
@yield('content')
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
|
|
const toggleSidebar = document.getElementById('toggleSidebar');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const overlay = document.getElementById('sidebarOverlay');
|
|
|
|
if(toggleSidebar){
|
|
|
|
toggleSidebar.addEventListener('click', () => {
|
|
|
|
sidebar.classList.toggle('active');
|
|
|
|
if(sidebar.classList.contains('active')){
|
|
overlay.style.display = 'block';
|
|
}else{
|
|
overlay.style.display = 'none';
|
|
}
|
|
|
|
});
|
|
|
|
overlay.addEventListener('click', () => {
|
|
|
|
sidebar.classList.remove('active');
|
|
overlay.style.display = 'none';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
@stack('scripts')
|
|
@yield('scripts')
|
|
|
|
</body>
|
|
</html> |