TIF_Nganjuk_E41220879/resources/views/layouts/app.blade.php

101 lines
3.2 KiB
PHP

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', 'Dashboard') - MedData</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
[x-cloak] { display: none !important; }
</style>
<style>
:root {
--sidebar-bg: #4A538F;
--sidebar-hover: #424B84;
--sidebar-active-bg: #E9EBF5;
--content-bg: #F4F6FF;
--card-white: #FFFFFF;
--border-color: #E5E7F2;
--text-primary: #2F347A;
--text-secondary: #7A7FAE;
}
body {
background-color: var(--content-bg);
}
.sidebar {
background-color: var(--sidebar-bg);
width: 260px;
}
.sidebar-link {
color: white;
transition: all 0.2s;
}
.sidebar-link:hover {
background-color: var(--sidebar-hover);
}
.sidebar-link.active {
background-color: var(--sidebar-active-bg);
color: var(--sidebar-bg);
}
.content-area {
margin-left: 260px;
background-color: var(--content-bg);
min-height: 100vh;
}
.card-custom {
background-color: var(--card-white);
border: 1px solid var(--border-color);
}
.text-primary-custom {
color: var(--text-primary);
}
.text-secondary-custom {
color: var(--text-secondary);
}
.table-header-custom {
background-color: var(--sidebar-bg);
color: white;
}
.badge-aman {
background-color: #C9F7E3;
color: #1F9254;
}
.badge-waspada {
background-color: #FEF9C3; /* yellow-100 */
color: #A16207; /* yellow-700 */
}
.badge-awas {
background-color: #FFEDD5; /* orange-100 */
color: #C2410C; /* orange-700 */
}
.badge-kritis {
background-color: #DC2626; /* red-600 */
color: #FFFFFF; /* white */
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Sidebar -->
<x-sidebar />
<!-- Main Content -->
<div class="content-area">
<!-- Navbar -->
<x-navbar />
<!-- Page Content -->
<main class="p-6">
{{ $slot }}
</main>
</div>
<!-- Notification Modal -->
<x-notification-modal />
@stack('scripts')
</body>
</html>