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

249 lines
10 KiB
PHP

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>DIKPLHD | Dinas Lingkungan Hidup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
<link href="{{asset('assets/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
<script src="{{asset('assets/js/config.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
.active{
color: #E9811A!important;
}
.poppins-thin {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;
}
.poppins-extralight {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
}
.poppins-light {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
.poppins-extrabold {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: normal;
}
.poppins-black {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
}
.poppins-thin-italic {
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: italic;
}
.poppins-extralight-italic {
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: italic;
}
.poppins-light-italic {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: italic;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium-italic {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: italic;
}
.poppins-semibold-italic {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: italic;
}
.poppins-bold-italic {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: italic;
}
.poppins-extrabold-italic {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style: italic;
}
.poppins-black-italic {
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: italic;
}
</style>
@yield('css')
</head>
<body class="poppins-regular bg-white">
<header class="absolute w-full z-20 {{ Request::is('/') || Request::is('resource-data') ? '' : 'bg-[#103760]'}}">
<div class="container mx-auto flex justify-between items-center px-6 py-4">
<!-- Logo -->
<div class="">
<a href="{{ url('/') }}" class="flex items-center gap-3">
<img src="{{ asset('assets/logo-dlh.png') }}" class="w-12 h-12 rounded-full bg-white p-1" alt="logo">
<div>
<h1 class="text-accent poppins-bold font-bold text-lg active">DIKPLHD</h1>
<p class="text-white text-sm">Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
</div>
</a>
</div>
<!-- Menu Desktop -->
<nav class="hidden lg:flex gap-8">
<a href="{{ url('/') }}" class="{{ Request::is('/*') ? 'active font-bold' : 'text-white'}} ">Home</a>
<a href="{{ url('resource-data') }}" class="{{ Request::is('resource-data*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Resource Data</a>
<a href="{{ url('dataset') }}" class="{{ Request::is('dataset') ? 'active font-bold' : 'text-white'}} hover:text-accent">Dataset</a>
<a href="{{ url('dataset-tambahan') }}" class="{{ Request::is('dataset-tambahan*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Dataset Tambahan</a>
<a href="{{ url('login') }}" class="{{ Request::is('login*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Login</a>
{{-- <a href="{{ url('help') }}" class="{{ Request::is('help*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Bantuan</a> --}}
</nav>
<!-- Tombol Mobile -->
<button id="menu-btn" class="lg:hidden block text-white focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Menu Mobile -->
<div id="mobile-menu" class="hidden flex flex-col bg-white px-6 py-4 md:hidden">
<a href="{{ url('/') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Home</a>
<a href="{{ url('resource-data') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Resource Data</a>
<a href="{{ url('/dataset') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset</a>
<a href="{{ url('/dataset-tambahan') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset Tambahan</a>
<a href="{{ url('/help') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Bantuan</a>
</div>
</header>
@yield('content')
<div class="w-full p-4 bg-[#103760]">
<div class="flex px-10 text-white">
<p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
</div>
</div>
<!-- Plugin Js -->
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
<script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>
<!-- App Js -->
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
<script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
<script src="{{asset('assets/js/toast.min.js')}}"></script>
<script src="{{asset('assets/js/select2/select2.bundle.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/datatables/datatables.bundle.js')}}"></script>
<script>
$(document).ready(function() {
$('.select2').select2();
$('.numberInput').on('input', function() {
this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
});
});
@if (Session::get('type')=='error')
toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
@endif
@if (Session::get('type')=='success')
toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
@endif
@if (Session::get('type')=='warning')
toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
@endif
@if (Session::get('type')=='info')
toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
@endif
</script>
<script>
// Toggle Menu Mobile
const btn = document.getElementById('menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
const btn = document.getElementById('filter');
const menu = document.getElementById('filter-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
<!-- Dashboard App js -->
@yield('js')
</body>
</html>