400 lines
9.0 KiB
PHP
400 lines
9.0 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: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #64748b !important;
|
|
border-radius: 12px;
|
|
padding: 12px 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%;
|
|
}
|
|
|
|
/* =========================
|
|
TOPBAR
|
|
========================= */
|
|
|
|
.topbar {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 15px 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.page-title {
|
|
font-weight: 700;
|
|
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);
|
|
}
|
|
|
|
/* =========================
|
|
HERO
|
|
========================= */
|
|
|
|
.card-hero {
|
|
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
|
|
color: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.card-hero h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card-hero p {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* =========================
|
|
TABLE
|
|
========================= */
|
|
|
|
.table {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* =========================
|
|
BUTTON
|
|
========================= */
|
|
|
|
.btn-primary {
|
|
background: #0ea5e9;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #0284c7;
|
|
}
|
|
|
|
/* =========================
|
|
PAGINATION
|
|
========================= */
|
|
|
|
.pagination {
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.page-item {
|
|
margin: 3px;
|
|
}
|
|
|
|
.page-link {
|
|
padding: 6px 12px !important;
|
|
font-size: 14px;
|
|
border-radius: 8px !important;
|
|
border: 1px solid #e5e7eb;
|
|
color: #0ea5e9;
|
|
background: white;
|
|
}
|
|
|
|
.page-link:hover {
|
|
background: #0ea5e9;
|
|
color: white;
|
|
}
|
|
|
|
.page-item.active .page-link {
|
|
background: #0ea5e9;
|
|
border-color: #0ea5e9;
|
|
color: white;
|
|
}
|
|
|
|
.page-item.disabled .page-link {
|
|
color: #cbd5e1;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* =========================
|
|
MOBILE NAVBAR
|
|
========================= */
|
|
|
|
.mobile-topbar {
|
|
display: none;
|
|
background: white;
|
|
padding: 15px 20px;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.menu-btn {
|
|
border: none;
|
|
background: none;
|
|
font-size: 22px;
|
|
color: #0ea5e9;
|
|
}
|
|
|
|
/* =========================
|
|
RESPONSIVE
|
|
========================= */
|
|
|
|
@media(max-width: 991px) {
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -260px;
|
|
z-index: 1050;
|
|
height: 100%;
|
|
}
|
|
|
|
.sidebar.active {
|
|
left: 0;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
|
|
.mobile-topbar {
|
|
display: flex;
|
|
}
|
|
|
|
.topbar {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
gap: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
@media(max-width: 576px) {
|
|
|
|
.content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.topbar {
|
|
padding: 15px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.table {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn {
|
|
font-size: 13px;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- MOBILE TOPBAR -->
|
|
<div class="mobile-topbar">
|
|
|
|
<h5 class="mb-0 fw-bold text-primary">
|
|
TensiKu
|
|
</h5>
|
|
|
|
<button class="menu-btn" id="menuToggle">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex">
|
|
|
|
<!-- SIDEBAR -->
|
|
<div class="sidebar p-3" id="sidebar">
|
|
|
|
<h4 class="text-center mb-3">TensiKu</h4>
|
|
<hr>
|
|
|
|
<ul class="nav flex-column">
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/user/dashboard') }}"
|
|
class="nav-link {{ request()->is('user/dashboard') ? 'active' : '' }}">
|
|
<i class="fa fa-home me-2"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/user/diagnosa') }}"
|
|
class="nav-link {{ request()->is('user/diagnosa') ? 'active' : '' }}">
|
|
<i class="fa fa-stethoscope me-2"></i> Diagnosa
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/user/riwayat') }}"
|
|
class="nav-link {{ request()->is('user/riwayat') ? 'active' : '' }}">
|
|
<i class="fa fa-history me-2"></i> Riwayat
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="{{ url('/user/edukasi') }}"
|
|
class="nav-link {{ request()->is('user/edukasi*') ? 'active' : '' }}">
|
|
<i class="fa fa-book me-2"></i> Edukasi
|
|
</a>
|
|
</li>
|
|
|
|
<!-- LOGOUT -->
|
|
<li class="nav-item mt-4">
|
|
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
|
|
<button
|
|
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>
|
|
<h5 class="page-title">@yield('title')</h5>
|
|
|
|
<div class="page-subtitle">
|
|
Sistem Pakar Diagnosa Penyakit
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fw-semibold">
|
|
{{ auth()->user()->name ?? 'User' }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 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 menuToggle = document.getElementById('menuToggle');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
menuToggle.addEventListener('click', function () {
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
|
|
</script>
|
|
|
|
@stack('scripts')
|
|
@yield('scripts')
|
|
|
|
</body>
|
|
</html> |