190 lines
8.5 KiB
PHP
190 lines
8.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SLHD | Dinas Lingkungan Hidup</title>
|
|
<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')}}">
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="{{ asset('assets/js/tailwind.js') }}"></script>
|
|
<!-- Google Fonts -->
|
|
<link href="{{ asset('assets/css/font.css') }}" rel="stylesheet">
|
|
<!-- Lucide Icons -->
|
|
<script src="{{ asset('assets/js/lucide.js') }}"></script>
|
|
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
|
|
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
.nav-scrolled {
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.filter-active {
|
|
background-color: #2563eb;
|
|
color: white;
|
|
border-color: #2563eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900">
|
|
|
|
<!-- Navigation -->
|
|
<nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 py-4">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
|
|
<div class="flex items-center space-x-3">
|
|
<img src="{{asset('assets/logo-dinas.ico')}}" width="40" alt="">
|
|
<div>
|
|
<h1 class="font-bold text-xl tracking-tight text-blue-900 leading-none uppercase">SLHD</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-blue-600 font-bold">Status Lingkungan Hidup Provinsi DKI Jakarta</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
<a href="{{ url('/') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Beranda</a>
|
|
<a href="{{ url('dataset') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset</a>
|
|
<a href="{{ url('dataset-tambahan') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset Tambahan</a>
|
|
{{-- <a href="#" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Informasi</a> --}}
|
|
<a href="{{ url('login') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-5 py-2 rounded-xl font-semibold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
|
|
<span>Login</span>
|
|
<i data-lucide="log_in" class="w-5 h-5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile Toggle -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-btn" class="text-slate-800">
|
|
<i data-lucide="menu" id="menu-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100 p-4 space-y-4 shadow-xl">
|
|
<a href="{{ url('/') }} class="block font-medium py-2">Beranda</a>
|
|
<a href="{{ url('dataset') }}" class="block font-medium py-2">Dataset</a>
|
|
<a href="{{ url('dataset-tambahan') }}" class="block font-medium py-2">Dataset Tambahan</a>
|
|
<a href="{{ url('/login') }}" class="w-full bg-blue-600 text-white px-5 py-3 rounded-xl font-bold">Login</a>
|
|
</div>
|
|
</nav>
|
|
|
|
@yield('content')
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white py-12 border-t border-slate-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
<div class="mb-6 md:mb-0">
|
|
<div class="flex items-center justify-center md:justify-start space-x-3 mb-2">
|
|
<img src="{{asset('assets/logo-dinas.ico')}}" width="40" alt="">
|
|
<span class="font-bold text-slate-900 uppercase">SLHD JAKARTA</span>
|
|
</div>
|
|
<p class="text-slate-500 text-xs">© {{ date('Y') }} Dinas Lingkungan Hidup Provinsi DKI Jakarta.</p>
|
|
</div>
|
|
{{-- <div class="flex space-x-8 text-sm font-medium text-slate-600">
|
|
<a href="#" class="hover:text-blue-600">Kontak</a>
|
|
<a href="#" class="hover:text-blue-600">Privasi</a>
|
|
<a href="#" class="hover:text-blue-600">DLH Jakarta</a>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- jQuery CDN -->
|
|
<script src="{{ asset('assets/js/jquery.min.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>
|
|
$(document).ready(function() {
|
|
// Initialize Lucide Icons
|
|
lucide.createIcons();
|
|
|
|
// Sticky Header & Scroll Logic
|
|
$(window).scroll(function() {
|
|
if ($(window).scrollTop() > 50) {
|
|
$('#main-nav').addClass('nav-scrolled');
|
|
} else {
|
|
$('#main-nav').removeClass('nav-scrolled');
|
|
}
|
|
});
|
|
|
|
// Mobile Menu Toggle
|
|
$('#mobile-menu-btn').click(function() {
|
|
$('#mobile-menu').slideToggle('fast');
|
|
const iconName = $('#menu-icon').attr('data-lucide') === 'menu' ? 'x' : 'menu';
|
|
$('#menu-icon').attr('data-lucide', iconName);
|
|
lucide.createIcons(); // Re-render icon
|
|
});
|
|
|
|
// Simple Year Filter
|
|
$('.year-filter').click(function() {
|
|
const year = $(this).attr('data-year');
|
|
|
|
// Update UI active state
|
|
$('.year-filter').removeClass('bg-blue-600 text-white').addClass('text-slate-600');
|
|
$(this).addClass('bg-blue-600 text-white').removeClass('text-slate-600');
|
|
|
|
if (year === 'all') {
|
|
$('.report-card').fadeIn();
|
|
} else {
|
|
$('.report-card').hide();
|
|
$(`.report-card[data-year="${year}"]`).fadeIn();
|
|
}
|
|
});
|
|
|
|
// Smooth Scroll for Anchors
|
|
$('a[href^="#"]').on('click', function(event) {
|
|
var target = $(this.getAttribute('href'));
|
|
if( target.length ) {
|
|
event.preventDefault();
|
|
$('html, body').stop().animate({
|
|
scrollTop: target.offset().top - 80
|
|
}, 800);
|
|
}
|
|
});
|
|
|
|
// Dataset Filter Logic
|
|
$('.filter-btn').click(function() {
|
|
const category = $(this).attr('data-category');
|
|
|
|
// Active state styling
|
|
$('.filter-btn').removeClass('filter-active').addClass('text-slate-600 border-slate-200').removeClass('border-transparent');
|
|
$(this).addClass('filter-active').removeClass('text-slate-600 border-slate-200').addClass('border-transparent');
|
|
|
|
if (category === 'all') {
|
|
$('.dataset-item').fadeIn(300);
|
|
} else {
|
|
$('.dataset-item').hide();
|
|
$(`.dataset-item[data-category="${category}"]`).fadeIn(300);
|
|
}
|
|
|
|
updateCount();
|
|
});
|
|
|
|
// Live Search Logic
|
|
$('#dataset-search').on('keyup', function() {
|
|
const value = $(this).val().toLowerCase();
|
|
$("#dataset-container .dataset-item").filter(function() {
|
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
|
});
|
|
updateCount();
|
|
});
|
|
|
|
function updateCount() {
|
|
const count = $('.dataset-item:visible').length;
|
|
$('#count-display').text(count);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |