update
Ilham Wara Nugroho
parent
9f584efe61
commit
127aa9d275
|
|
@ -120,12 +120,7 @@ class FrontController extends Controller
|
|||
$dataset->where('template_id',@$resource_id);
|
||||
}
|
||||
|
||||
// if(@request()->key){
|
||||
// $data['dataset'] = Dataset::where('name','ilike','%'.request()->key.'%')->orderBy('DatasetId','DESC')->paginate(9);
|
||||
// }else{
|
||||
// $data['dataset'] = Dataset::orderBy('DatasetId','DESC')->paginate(9);
|
||||
// }
|
||||
$data['dataset'] = $dataset->paginate(9);
|
||||
$data['dataset'] = $dataset->paginate(4);
|
||||
$data['template'] = TabelData::all();
|
||||
$data['instansi'] = Instansi::all();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,133 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Login | SLHD</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="Dinas Lingkungan Hidup Provinsi DKI Jakarta" name="description">
|
||||
<meta content="coderthemes" name="author">
|
||||
|
||||
<!-- App favicon -->
|
||||
<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 rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
||||
|
||||
<!--Swiper slider css-->
|
||||
<link href="{{asset('assets/libs/swiper/swiper-bundle.min.css')}}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- App css -->
|
||||
<link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Icons css -->
|
||||
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
|
||||
<title>Login Portal - SLHD Provinsi DKI Jakarta</title>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
.login-gradient {
|
||||
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
|
||||
}
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">
|
||||
|
||||
<body class="">
|
||||
<!-- Login Container -->
|
||||
<div class="max-w-5xl w-full bg-white rounded-[2rem] shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[600px]">
|
||||
|
||||
<div class="flex h-screen bg-cover bg-center relative bg-no-repeat py-5" style="background:#f0f0f0;">
|
||||
<div class="bg-white lg:max-w-[480px] z-10 p-12 relative w-full h-full dark:bg-gray-800 mx-auto">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-center lg:text-start">
|
||||
<a href="{{url('login')}}" class="flex justify-center lg:justify-center">
|
||||
<img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="hidden dark:block">
|
||||
<img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="block dark:hidden">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 style="font-size: 20px;" class="mt-1 text-center"><b>SLHD</b></h3>
|
||||
<h3 class="mt-1 text-center">Status Lingkungan Hidup Daerah</h3>
|
||||
{{-- <h3 class="mt-1 text-center">Dinas Lingkungan Hidup Provinsi DKI Jakarta</h3> --}}
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<!-- title-->
|
||||
<h4 class="text-dark/70 text-lg font-semibold dark:text-light/80 mb-2">Masuk</h4>
|
||||
<p class="text-gray-400 mb-9">Masukkan username dan kata sandi Anda untuk mengakses akun.</p>
|
||||
<!-- Left Side: Illustration & Branding -->
|
||||
<div class="md:w-1/2 login-gradient p-12 text-white flex flex-col justify-between relative overflow-hidden">
|
||||
<!-- Decorative Circles -->
|
||||
<div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-400/20 rounded-full blur-3xl"></div>
|
||||
|
||||
<!-- form -->
|
||||
<form action="{{url('login')}}" method="POST">
|
||||
{{csrf_field()}}
|
||||
<div class="mb-6 space-y-2">
|
||||
<label for="emailaddress" class="font-semibold text-gray-500">Username</label>
|
||||
<input class="form-input" type="text" id="username" required="" name="email" placeholder="Masukan Username">
|
||||
</div>
|
||||
<div class="mb-6 space-y-2">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label for="password" class="font-semibold text-gray-500">Kata Sandi</label>
|
||||
<a href="{{url('forgot')}}" class="text-muted text-xs">Lupa Kata Sandi?</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="password" id="password" name="password" class="form-input rounded-e-none" placeholder="Masukan Kata Sandi">
|
||||
<span id="togglePassword" class="px-3 py-1 border rounded-e-md -ms-px dark:border-white/10"><i class="ri-eye-line text-lg"></i></span>
|
||||
</div
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="form-checkbox rounded text-primary" id="checkbox-signin">
|
||||
<label class="ms-2 text-sm font-medium" for="checkbox-signin">Ingatkan Saya</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" text-center">
|
||||
<button class="btn bg-primary text-white w-full" type="submit"><i class="ri-login-box-line me-1"></i> Masuk </button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- end form-->
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center space-x-3 mb-12">
|
||||
<div class="bg-white p-2 rounded-xl text-blue-600">
|
||||
<i data-lucide="layers" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-2xl tracking-tight leading-none uppercase text-white">SLHD</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-blue-100 font-bold">Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-center justify-center h-14 -mb-12">
|
||||
<!-- <p class="text-gray-400">Tidak memiliki akun? <a href="{{url('register')}}" class="text-gray-500 ms-1"><b>Daftar Sekarang</b></a></p> -->
|
||||
</footer>
|
||||
<h2 class="text-4xl font-extrabold leading-tight mb-6">Kelola Data Lingkungan Secara Terintegrasi</h2>
|
||||
<p class="text-blue-100 text-lg leading-relaxed mb-8">Selamat datang kembali di Portal Internal SLHD. Silakan masuk untuk mengakses dasbor pengelolaan data lingkungan hidup.</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats/Glass Card -->
|
||||
<div class="relative z-10 glass-effect p-6 rounded-2xl">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="bg-white/20 p-3 rounded-full">
|
||||
<i data-lucide="shield-check" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold uppercase tracking-wider text-blue-100">Keamanan Terjamin</p>
|
||||
<p class="text-sm">Enkripsi data dua arah untuk setiap sesi login pengguna.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Login Form -->
|
||||
<div class="md:w-1/2 p-8 md:p-16 flex flex-col justify-center">
|
||||
<div class="mb-10">
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-2">Login Portal</h3>
|
||||
<p class="text-slate-500 font-medium">Masukkan kredensial Anda untuk melanjutkan.</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ url('login') }}" method="POST" id="login-form" class="space-y-6">
|
||||
{{ csrf_field() }}
|
||||
<!-- Username -->
|
||||
<div class="space-y-2">
|
||||
<label for="username" class="text-sm font-bold text-slate-700 ml-1">Nama Pengguna / Email</label>
|
||||
<div class="relative">
|
||||
<i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
|
||||
<input type="text" id="username" name="username" placeholder="contoh: admin_dlh"
|
||||
class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label for="password" class="text-sm font-bold text-slate-700">Kata Sandi</label>
|
||||
{{-- <a href="#" class="text-x s font-bold text-blue-600 hover:text-blue-700 transition-colors">Lupa Password?</a> --}}
|
||||
</div>
|
||||
<div class="relative">
|
||||
<i data-lucide="lock" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
|
||||
<input type="password" id="password" name="password" placeholder="••••••••"
|
||||
class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all font-medium">
|
||||
<button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<i data-lucide="eye" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-blue-700 transform hover:-translate-y-0.5 transition-all shadow-xl shadow-blue-200 flex items-center justify-center group">
|
||||
Masuk Sekarang
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Bottom Link -->
|
||||
<div class="mt-auto pt-12 flex justify-center">
|
||||
<a href="{{ url('/') }}" class="flex items-center text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">
|
||||
<i data-lucide="chevron-left" class="w-4 h-4 mr-1"></i> Kembali ke Beranda
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plugin Js -->
|
||||
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
|
||||
<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/app.js')}}"></script>
|
||||
|
||||
<!-- Swiper Plugin Js -->
|
||||
<script src="{{asset('assets/libs/swiper/swiper-bundle.min.js')}}"></script>
|
||||
|
||||
<!-- Swiper Auth Demo Js -->
|
||||
<script src="{{asset('assets/js/pages/auth-swiper.js')}}"></script>
|
||||
|
||||
<script src="{{asset('assets/js/toast.min.js')}}"></script>
|
||||
<!-- jQuery CDN -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script>
|
||||
$('#togglePassword').on('click', function() {
|
||||
let passwordField = $('#password');
|
||||
let icon = $(this).find('i');
|
||||
$(document).ready(function() {
|
||||
lucide.createIcons();
|
||||
|
||||
// Cek apakah input saat ini bertipe password
|
||||
if (passwordField.attr('type') === 'password') {
|
||||
passwordField.attr('type', 'text'); // Ubah ke teks
|
||||
icon.removeClass('ri-eye-line').addClass('ri-eye-2-line'); // Ganti ikon
|
||||
} else {
|
||||
passwordField.attr('type', 'password'); // Ubah ke password
|
||||
icon.removeClass('ri-eye-2-line').addClass('ri-eye-line'); // Kembalikan ikon
|
||||
}
|
||||
// Simple Form Handling
|
||||
$('#login-form').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const btn = $(this).find('button[type="submit"]');
|
||||
const originalText = btn.html();
|
||||
|
||||
// Show loading state
|
||||
btn.prop('disabled', true).addClass('opacity-70').html('<i data-lucide="refresh-cw" class="w-5 h-5 animate-spin"></i>');
|
||||
lucide.createIcons();
|
||||
|
||||
// Mock API delay
|
||||
setTimeout(() => {
|
||||
alert('Sistem simulasi: Login berhasil! Mengarahkan ke dasbor...');
|
||||
window.location.href = '{{ url("/") }}';
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
@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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Login | SLHD</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="Dinas Lingkungan Hidup Provinsi DKI Jakarta" name="description">
|
||||
<meta content="coderthemes" name="author">
|
||||
|
||||
<!-- App favicon -->
|
||||
<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 rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
|
||||
|
||||
<!--Swiper slider css-->
|
||||
<link href="{{asset('assets/libs/swiper/swiper-bundle.min.css')}}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- App css -->
|
||||
<link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Icons css -->
|
||||
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
|
||||
</head>
|
||||
|
||||
<body class="">
|
||||
|
||||
<div class="flex h-screen bg-cover bg-center relative bg-no-repeat py-5" style="background:#f0f0f0;">
|
||||
<div class="bg-white lg:max-w-[480px] z-10 p-12 relative w-full h-full dark:bg-gray-800 mx-auto">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-center lg:text-start">
|
||||
<a href="{{url('login')}}" class="flex justify-center lg:justify-center">
|
||||
<img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="hidden dark:block">
|
||||
<img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="block dark:hidden">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 style="font-size: 20px;" class="mt-1 text-center"><b>SLHD</b></h3>
|
||||
<h3 class="mt-1 text-center">Status Lingkungan Hidup Daerah</h3>
|
||||
{{-- <h3 class="mt-1 text-center">Dinas Lingkungan Hidup Provinsi DKI Jakarta</h3> --}}
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<!-- title-->
|
||||
<h4 class="text-dark/70 text-lg font-semibold dark:text-light/80 mb-2">Masuk</h4>
|
||||
<p class="text-gray-400 mb-9">Masukkan username dan kata sandi Anda untuk mengakses akun.</p>
|
||||
|
||||
<!-- form -->
|
||||
<form action="{{url('login')}}" method="POST">
|
||||
{{csrf_field()}}
|
||||
<div class="mb-6 space-y-2">
|
||||
<label for="emailaddress" class="font-semibold text-gray-500">Username</label>
|
||||
<input class="form-input" type="text" id="username" required="" name="email" placeholder="Masukan Username">
|
||||
</div>
|
||||
<div class="mb-6 space-y-2">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label for="password" class="font-semibold text-gray-500">Kata Sandi</label>
|
||||
<a href="{{url('forgot')}}" class="text-muted text-xs">Lupa Kata Sandi?</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="password" id="password" name="password" class="form-input rounded-e-none" placeholder="Masukan Kata Sandi">
|
||||
<span id="togglePassword" class="px-3 py-1 border rounded-e-md -ms-px dark:border-white/10"><i class="ri-eye-line text-lg"></i></span>
|
||||
</div
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="form-checkbox rounded text-primary" id="checkbox-signin">
|
||||
<label class="ms-2 text-sm font-medium" for="checkbox-signin">Ingatkan Saya</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" text-center">
|
||||
<button class="btn bg-primary text-white w-full" type="submit"><i class="ri-login-box-line me-1"></i> Masuk </button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- end form-->
|
||||
</div>
|
||||
|
||||
<footer class="text-center justify-center h-14 -mb-12">
|
||||
<!-- <p class="text-gray-400">Tidak memiliki akun? <a href="{{url('register')}}" class="text-gray-500 ms-1"><b>Daftar Sekarang</b></a></p> -->
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Plugin Js -->
|
||||
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
|
||||
<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/app.js')}}"></script>
|
||||
|
||||
<!-- Swiper Plugin Js -->
|
||||
<script src="{{asset('assets/libs/swiper/swiper-bundle.min.js')}}"></script>
|
||||
|
||||
<!-- Swiper Auth Demo Js -->
|
||||
<script src="{{asset('assets/js/pages/auth-swiper.js')}}"></script>
|
||||
|
||||
<script src="{{asset('assets/js/toast.min.js')}}"></script>
|
||||
<script>
|
||||
$('#togglePassword').on('click', function() {
|
||||
let passwordField = $('#password');
|
||||
let icon = $(this).find('i');
|
||||
|
||||
// Cek apakah input saat ini bertipe password
|
||||
if (passwordField.attr('type') === 'password') {
|
||||
passwordField.attr('type', 'text'); // Ubah ke teks
|
||||
icon.removeClass('ri-eye-line').addClass('ri-eye-2-line'); // Ganti ikon
|
||||
} else {
|
||||
passwordField.attr('type', 'password'); // Ubah ke password
|
||||
icon.removeClass('ri-eye-2-line').addClass('ri-eye-line'); // Kembalikan ikon
|
||||
}
|
||||
});
|
||||
@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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Panel - SLHD Provinsi DKI Jakarta</title>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
|
||||
/* Sidebar Transitions */
|
||||
#sidebar {
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .sidebar-text,
|
||||
#sidebar.collapsed .sidebar-header-text,
|
||||
#sidebar.collapsed .sidebar-dropdown-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .sidebar-section-label {
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-item-active {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #2563eb;
|
||||
border-right: 4px solid #2563eb;
|
||||
}
|
||||
|
||||
/* Nested Menu Style */
|
||||
.submenu {
|
||||
display: none;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .submenu {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-50 text-slate-900 overflow-hidden">
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside id="sidebar" class="w-64 bg-white border-r border-slate-200 flex flex-col hidden md:flex z-30">
|
||||
<!-- Logo & Toggle Container -->
|
||||
<div class="p-6 border-b border-slate-50 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3 overflow-hidden">
|
||||
<div class="bg-blue-600 p-2 rounded-lg text-white shrink-0">
|
||||
<i data-lucide="layers" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="sidebar-header-text">
|
||||
<h1 class="font-bold text-lg tracking-tight text-blue-900 leading-none">SLHD</h1>
|
||||
<p class="text-[9px] uppercase tracking-widest text-blue-600 font-bold">Admin Panel</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desktop Toggle Button -->
|
||||
<button id="toggle-sidebar" class="text-slate-400 hover:text-blue-600 transition-colors">
|
||||
<i data-lucide="chevron-left" id="toggle-icon" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 overflow-y-auto py-4 custom-scrollbar">
|
||||
<div class="sidebar-section-label px-4 mb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all">Menu Utama</div>
|
||||
|
||||
<a href="#" class="sidebar-item-active flex items-center px-6 py-3 transition-all group">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<!-- Nested Menu: Manajemen Data -->
|
||||
<div class="menu-dropdown">
|
||||
<button class="w-full flex items-center justify-between px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all dropdown-trigger group">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="database" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Manajemen Data</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="sidebar-dropdown-icon w-4 h-4 transition-transform duration-200"></i>
|
||||
</button>
|
||||
<div class="submenu">
|
||||
<a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Air</a>
|
||||
<a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Udara</a>
|
||||
<a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Data Sampah</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="flex items-center px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all group">
|
||||
<i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Laporan Publikasi</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-dropdown">
|
||||
<button class="w-full flex items-center justify-between px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all dropdown-trigger group">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="bar-chart-3" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Visualisasi</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="sidebar-dropdown-icon w-4 h-4"></i>
|
||||
</button>
|
||||
<div class="submenu">
|
||||
<a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Peta Interaktif</a>
|
||||
<a href="#" class="flex items-center pl-14 pr-6 py-2.5 text-xs font-medium text-slate-500 hover:text-blue-600 transition-colors">Grafik Tahunan</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section-label px-4 mt-8 mb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all">Sistem</div>
|
||||
|
||||
<a href="#" class="flex items-center px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all group">
|
||||
<i data-lucide="users" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Manajemen User</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-6 py-3 text-slate-500 hover:text-blue-600 hover:bg-slate-50 transition-all group">
|
||||
<i data-lucide="settings" class="w-5 h-5 shrink-0"></i>
|
||||
<span class="sidebar-text font-semibold text-sm ml-3">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Bottom Profile -->
|
||||
<div class="p-4 border-t border-slate-100">
|
||||
<div class="flex items-center p-3 bg-slate-50 rounded-xl overflow-hidden">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold border border-blue-200 shrink-0">
|
||||
AD
|
||||
</div>
|
||||
<div class="sidebar-text ml-3 overflow-hidden">
|
||||
<p class="text-sm font-bold text-slate-900 truncate">Admin DLH</p>
|
||||
<p class="text-[10px] text-slate-500 truncate">admin@jakarta.go.id</p>
|
||||
</div>
|
||||
<a href="login.html" class="sidebar-text ml-auto text-slate-400 hover:text-red-500 transition-colors">
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Top Header -->
|
||||
<header class="h-20 bg-white border-b border-slate-200 flex items-center justify-between px-8 shrink-0">
|
||||
<div class="flex items-center">
|
||||
<button id="mobile-toggle" class="p-2 text-slate-600 md:hidden">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
<div class="hidden md:block">
|
||||
<h2 class="text-xl font-bold text-slate-900">Dashboard Utama</h2>
|
||||
<p class="text-xs text-slate-500">Ringkasan sistem SLHD Provinsi DKI Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="relative hidden sm:block">
|
||||
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
|
||||
<input type="text" placeholder="Cari fitur..." class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500 w-48 lg:w-64">
|
||||
</div>
|
||||
<button class="relative p-2 text-slate-400 hover:text-blue-600 transition-colors">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 mx-2"></div>
|
||||
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-blue-700 transition-all flex items-center shadow-lg shadow-blue-100">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Tambah Data
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dashboard Content (Scrollable) -->
|
||||
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-blue-50 rounded-lg text-blue-600">
|
||||
<i data-lucide="database" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-green-500 bg-green-50 px-2 py-1 rounded">+12%</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Total Dataset</p>
|
||||
<h4 class="text-2xl font-black text-slate-900 mt-1">1,284</h4>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-green-50 rounded-lg text-green-600">
|
||||
<i data-lucide="download" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-green-500 bg-green-50 px-2 py-1 rounded">+5%</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Unduhan Data</p>
|
||||
<h4 class="text-2xl font-black text-slate-900 mt-1">45.2K</h4>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-orange-50 rounded-lg text-orange-600">
|
||||
<i data-lucide="file-check" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-slate-400 bg-slate-50 px-2 py-1 rounded">Stabil</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Publikasi Aktif</p>
|
||||
<h4 class="text-2xl font-black text-slate-900 mt-1">312</h4>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="p-2 bg-purple-50 rounded-lg text-purple-600">
|
||||
<i data-lucide="eye" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded">-2%</span>
|
||||
</div>
|
||||
<p class="text-slate-500 text-[10px] font-bold uppercase tracking-wider">Kunjungan</p>
|
||||
<h4 class="text-2xl font-black text-slate-900 mt-1">2,840</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datatable Section -->
|
||||
<div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900">Dataset Lingkungan Terbaru</h3>
|
||||
<p class="text-xs text-slate-500 font-medium">Pengelolaan data masuk dari berbagai stasiun pemantauan.</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors flex items-center text-sm font-semibold text-slate-600">
|
||||
<i data-lucide="download-cloud" class="w-4 h-4 mr-2"></i> Ekspor
|
||||
</button>
|
||||
<button class="p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors flex items-center text-sm font-semibold">
|
||||
<i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-slate-50/50 border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Judul Dataset</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kategori</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Terakhir Update</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Status</th>
|
||||
<th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
|
||||
<i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-slate-900">Kualitas Air Sungai Jakarta 2024</p>
|
||||
<p class="text-[10px] text-slate-400 font-medium">CSV, XLS • 12.5 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Air Limbah</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-xs text-slate-500 font-medium">12 Feb 2026</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
<span class="text-[10px] font-bold text-green-700 uppercase">Terverifikasi</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 rounded bg-orange-100 flex items-center justify-center text-orange-600 mr-3">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-slate-900">Volume Sampah Per Kecamatan</p>
|
||||
<p class="text-[10px] text-slate-400 font-medium">PDF, XLS • 8.2 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Persampahan</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-xs text-slate-500 font-medium">08 Feb 2026</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
|
||||
<span class="text-[10px] font-bold text-yellow-700 uppercase">Draft</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
|
||||
<i data-lucide="wind" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-slate-900">ISPU Real-time Station</p>
|
||||
<p class="text-[10px] text-slate-400 font-medium">JSON API • Live Stream</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs text-slate-600 font-semibold bg-slate-100 px-2 py-1 rounded">Udara</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-xs text-slate-500 font-medium">Hari ini</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
|
||||
<span class="text-[10px] font-bold text-blue-700 uppercase">Otomatis</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-slate-400 hover:text-blue-600 p-1 transition-colors"><i data-lucide="more-vertical" class="w-5 h-5"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- jQuery CDN -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
lucide.createIcons();
|
||||
|
||||
// 1. Sidebar Collapse Logic
|
||||
$('#toggle-sidebar').click(function() {
|
||||
const sidebar = $('#sidebar');
|
||||
const icon = $('#toggle-icon');
|
||||
|
||||
sidebar.toggleClass('collapsed');
|
||||
|
||||
// Change icon direction
|
||||
if (sidebar.hasClass('collapsed')) {
|
||||
icon.attr('data-lucide', 'chevron-right');
|
||||
} else {
|
||||
icon.attr('data-lucide', 'chevron-left');
|
||||
}
|
||||
|
||||
// Re-init icons to apply changes
|
||||
lucide.createIcons();
|
||||
});
|
||||
|
||||
// 2. Nested Menu / Dropdown Logic
|
||||
$('.dropdown-trigger').click(function() {
|
||||
// If sidebar is collapsed, don't allow open dropdown (or expand it first)
|
||||
if($('#sidebar').hasClass('collapsed')) {
|
||||
$('#sidebar').removeClass('collapsed');
|
||||
$('#toggle-icon').attr('data-lucide', 'chevron-left');
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
const submenu = $(this).next('.submenu');
|
||||
const icon = $(this).find('.sidebar-dropdown-icon');
|
||||
|
||||
// Toggle Submenu
|
||||
submenu.slideToggle(300);
|
||||
|
||||
// Rotate Icon
|
||||
icon.toggleClass('rotate-180');
|
||||
|
||||
// Optional: Close other open dropdowns
|
||||
$('.submenu').not(submenu).slideUp(300);
|
||||
$('.sidebar-dropdown-icon').not(icon).removeClass('rotate-180');
|
||||
});
|
||||
|
||||
// Mobile Menu Toggle
|
||||
$('#mobile-toggle').click(function() {
|
||||
$('#sidebar').toggleClass('hidden').toggleClass('fixed inset-0 w-full');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,122 +1,107 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@extends('layouts.appNew')
|
||||
@section('content')
|
||||
<section class="container relative pt-[150px] py-20 pb-0 px-5 flex flex-col gap-5">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="">Home / <a href="{{ url('dataset') }}">Dataset</a> / <span class="bold">{{ $dataset->name }}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container pb-10 pt-10 px-5">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center w-1/4">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataset->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataset->instansi->name }}</h1>
|
||||
<a href="{{url('opendata/dataset/download/'.encode_id(@$dataset->DatasetId))}}" class="rounded-full text-[12px] bg-success text-white px-2 py-1">Download <i class="ri-download-line"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-3/4">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataset->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ $dataset->deskripsi }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#103760] text-white px-2 py-1">{{$dataset->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#103760] text-white px-2 py-1">{{$dataset->tabelData->name}}</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<span>Bagikan : </span>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-facebook-line"></i></a>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-whatsapp-line"></i></a>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-twitter-line"></i></a>
|
||||
</div>
|
||||
<!-- Header / Breadcrumb -->
|
||||
<header class="pt-32 pb-8 bg-white border-b border-slate-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<nav class="flex mb-4 text-sm font-medium text-slate-500" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center space-x-2">
|
||||
<li><a href="dataset.html" class="hover:text-blue-600 transition-colors">Dataset</a></li>
|
||||
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i></li>
|
||||
<li class="text-slate-900 truncate max-w-[200px] md:max-w-none">{{ $dataset->name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="flex flex-col md:flex-row md:items-start justify-between gap-6">
|
||||
<div class="max-w-3xl">
|
||||
<div class="flex items-center space-x-3 mb-3">
|
||||
{{-- <span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">Udara</span> --}}
|
||||
<span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i> Terbit: {{ date('d M Y',strtotime($dataset->created_at)) }}</span>
|
||||
</div>
|
||||
<h2 class="text-2xl md:text-3xl font-extrabold text-slate-900 tracking-tight leading-tight">{{ $dataset->name }}</h2>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{url('opendata/dataset/download/'.encode_id(@$dataset->DatasetId))}}" class="flex-1 md:flex-none bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all flex items-center justify-center shadow-lg shadow-blue-100">
|
||||
<i data-lucide="download" class="w-5 h-5 mr-2"></i> Unduh Data
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$data = json_decode($dataset->data);
|
||||
?>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div style="overflow-x:auto; width:100%!important;">
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-search="false"
|
||||
data-pagination="true"
|
||||
data-side-pagination="server"
|
||||
data-url="{{ url('dataset/Griddetail?id='.encode_id($keyId)) }}">
|
||||
<thead>
|
||||
<tr class="bg-primary-light text-primary">
|
||||
<th data-field="no" class="gridjs-td gridjs-th text-xs">No</th>
|
||||
@foreach ($tabel as $k => $key)
|
||||
<th data-field="{{$key->order}}" class="gridjs-td gridjs-th text-xs">{{ $key->name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
|
||||
{{-- <table id="table"
|
||||
data-toggle="table"
|
||||
data-search="false"
|
||||
data-pagination="true"
|
||||
data-side-pagination="server"
|
||||
data-url="{{ url('dataset/Griddetail?id='.@$keyId) }}"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-primary-light text-primary">
|
||||
@if (!empty($data))
|
||||
@foreach ($data[0] as $k => $key)
|
||||
<th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
|
||||
@endforeach
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
</table> --}}
|
||||
</div>
|
||||
<!-- Left Column: Details & Preview -->
|
||||
<div class="lg:col-span-2 space-y-8">
|
||||
|
||||
<!-- Description Section -->
|
||||
<section class="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
|
||||
<h3 class="text-lg font-bold mb-4 flex items-center text-slate-900">
|
||||
<i data-lucide="info" class="w-5 h-5 mr-2 text-blue-600"></i> Deskripsi Dataset
|
||||
</h3>
|
||||
<p class="text-slate-600 leading-relaxed">
|
||||
{{ $dataset->deskripsi }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Data Preview Section -->
|
||||
<section class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 class="text-lg font-bold text-slate-900 flex items-center">
|
||||
<i data-lucide="table" class="w-5 h-5 mr-2 text-blue-600"></i> Data Grid
|
||||
</h3>
|
||||
{{-- <span class="text-xs font-bold text-slate-400 uppercase">Jumlah Row Data: 100</span> --}}
|
||||
</div>
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<table class="w-full text-left text-sm" id="table"
|
||||
data-toggle="table"
|
||||
data-search="false"
|
||||
data-pagination="false"
|
||||
data-side-pagination="server"
|
||||
data-url="{{ url('dataset/Griddetail?id='.encode_id($keyId)) }}">
|
||||
<thead class="bg-slate-50 text-slate-500 uppercase text-[10px] font-bold tracking-wider">
|
||||
<tr class="hover:bg-blue-50/30 transition-colors">
|
||||
<th data-field="no" class="px-6 py-4">No</th>
|
||||
@foreach ($tabel as $k => $key)
|
||||
<th data-field="{{$key->order}}" class="px-6 py-4">{{ $key->name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative bg-[#F0F0F0] ">
|
||||
<div class="container px-10 py-10">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@foreach($lainnya as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
<!-- Right Column: Metadata & Format -->
|
||||
<div class="space-y-6">
|
||||
<!-- Metadata Card -->
|
||||
<section class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
|
||||
<h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-6">Informasi Metadata</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-50">
|
||||
<span class="text-sm text-slate-500">Tahun Data</span>
|
||||
<span class="text-sm font-bold text-slate-900">{{ $dataset->tahun_data }}</span>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-50">
|
||||
<span class="text-sm text-slate-500">Tahun Input Data</span>
|
||||
<span class="text-sm font-bold text-slate-900">{{ $dataset->tahun }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-50">
|
||||
<span class="text-sm text-slate-500">Organisasi</span>
|
||||
<span class="text-sm font-bold text-blue-600 underline">{{ $dataset->instansi->name }}</span>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
{{-- <div class="flex justify-between items-center py-2 border-b border-slate-50">
|
||||
<span class="text-sm text-slate-500">Dilihat</span>
|
||||
<span class="text-sm font-bold text-slate-900">1.240 Kali</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-sm text-slate-500">Organisasi</span>
|
||||
<span class="text-sm font-bold text-slate-900">Dinas Lingkungan Hidup</span>
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@section('content')
|
||||
<section class="container relative pt-[150px] py-20 pb-0 px-5 flex flex-col gap-5">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="">Home / <a href="{{ url('dataset') }}">Dataset</a> / <span class="bold">{{ $dataset->name }}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container pb-10 pt-10 px-5">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center w-1/4">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataset->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataset->instansi->name }}</h1>
|
||||
<a href="{{url('opendata/dataset/download/'.encode_id(@$dataset->DatasetId))}}" class="rounded-full text-[12px] bg-success text-white px-2 py-1">Download <i class="ri-download-line"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-3/4">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataset->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ $dataset->deskripsi }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#103760] text-white px-2 py-1">{{$dataset->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#103760] text-white px-2 py-1">{{$dataset->tabelData->name}}</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<span>Bagikan : </span>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-facebook-line"></i></a>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-whatsapp-line"></i></a>
|
||||
<a href=""><i class="p-1 rounded-full bg-[#aaa] text-white ri-twitter-line"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$data = json_decode($dataset->data);
|
||||
?>
|
||||
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div style="overflow-x:auto; width:100%!important;">
|
||||
<table id="table"
|
||||
data-toggle="table"
|
||||
data-search="false"
|
||||
data-pagination="true"
|
||||
data-side-pagination="server"
|
||||
data-url="{{ url('dataset/Griddetail?id='.encode_id($keyId)) }}">
|
||||
<thead>
|
||||
<tr class="bg-primary-light text-primary">
|
||||
<th data-field="no" class="gridjs-td gridjs-th text-xs">No</th>
|
||||
@foreach ($tabel as $k => $key)
|
||||
<th data-field="{{$key->order}}" class="gridjs-td gridjs-th text-xs">{{ $key->name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
{{-- <table id="table"
|
||||
data-toggle="table"
|
||||
data-search="false"
|
||||
data-pagination="true"
|
||||
data-side-pagination="server"
|
||||
data-url="{{ url('dataset/Griddetail?id='.@$keyId) }}"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-primary-light text-primary">
|
||||
@if (!empty($data))
|
||||
@foreach ($data[0] as $k => $key)
|
||||
<th data-field="{{$k}}" class="gridjs-td gridjs-th text-xs">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
|
||||
@endforeach
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
</table> --}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative bg-[#F0F0F0] ">
|
||||
<div class="container px-10 py-10">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@foreach($lainnya as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -1,50 +1,44 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@extends('layouts.appNew')
|
||||
@section('content')
|
||||
|
||||
<section class="container relative pt-[150px] py-20 pb-0 px-5 flex flex-col gap-5">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="">Home / <span class="bold">Dataset</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<form action="" method="GET">
|
||||
<div class="relative w-full">
|
||||
<input type="text" name="key" placeholder="Data Apa yang kamu cari ?" style="border:none;" class="w-full placeholder-[#eee] pr-16 py-5 px-5 shadow-lg rounded-full focus:outline-none"/>
|
||||
<button class="absolute top-8 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full" style="background: #E9811A;">
|
||||
<i class="ri-search-line"></i>
|
||||
</button>
|
||||
<!-- Header Section -->
|
||||
<header class="pt-32 pb-12 bg-white border-b border-slate-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Eksplorasi Dataset</h2>
|
||||
<p class="text-slate-600 mt-2">Temukan data mentah kinerja lingkungan hidup</p>
|
||||
</div>
|
||||
<div class="relative w-full md:w-96 hidden">
|
||||
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5"></i>
|
||||
<input type="text" id="dataset-search" placeholder="Cari nama dataset..." class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container py-20 px-5">
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<div class="bg-white text-center h-full rounded-[20px] shadow-lg p-5 py-10 gap-3 w-full lg:w-1/4">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="space-y-8">
|
||||
<form action="" method="GET">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h1 class="bold">Filter</h1>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ri-filter-line text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-slate-900 mb-4 flex items-center">
|
||||
<i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
|
||||
</h3>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Instansi</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="instansi_id" id="">
|
||||
<option value="">-- Pilih Instansi --</option>
|
||||
<h1 class="mb-3 font-bold text-left">Organisasi</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="instansi_id" id="">
|
||||
<option value="">-- Pilih Organisasi --</option>
|
||||
@foreach ($instansi as $dataInstansi)
|
||||
<option {{ decode_id(@request()->instansi_id) == $dataInstansi->MsInstansiId ? 'selected' : '' }} value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Resource Data</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="resource_id" id="">
|
||||
<h1 class="mb-3 font-bold text-left">Resource Data</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="resource_id" id="">
|
||||
<option value="">-- Pilih Resource Data --</option>
|
||||
@foreach ($template as $dataTemp)
|
||||
<option {{ decode_id(@request()->resource_id) == $dataTemp->MsTemplateId ? 'selected' : '' }} value="{{encode_id($dataTemp->MsTemplateId)}}">{{$dataTemp->name}}</option>
|
||||
|
|
@ -53,8 +47,8 @@
|
|||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Tahun</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="tahun" id="">
|
||||
<h1 class="mb-3 text-left font-bold">Tahun Data</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="tahun" id="">
|
||||
<option value="">-- Pilih Tahun --</option>
|
||||
@for($i = date('Y'); $i >= (date('Y')-10); $i--)
|
||||
<option {{ @request()->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
|
||||
|
|
@ -62,45 +56,71 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="rounded w-full bg-[#E9811A] text-white px-2 py-1">Cari</button>
|
||||
<button class="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i> Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/4">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($dataset as $dataSet)
|
||||
<a href="{{ url('dataset-tambahan/detail/'.encode_id($dataSet->DatasetTambahanId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->template->name,0,25) }}...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
<div class="p-6 bg-blue-600 rounded-2xl text-white shadow-xl shadow-blue-200">
|
||||
<i data-lucide="info" class="mb-4"></i>
|
||||
<h4 class="font-bold mb-2">Request Data?</h4>
|
||||
<p class="text-sm text-blue-100 mb-4">Tidak menemukan data yang Anda cari? Silakan ajukan permohonan informasi publik.</p>
|
||||
<button class="w-full bg-white text-blue-600 py-2 rounded-lg font-bold text-sm hover:bg-blue-50 transition-colors">Ajukan Permohonan</button>
|
||||
</div>
|
||||
@if(count($dataset) == 0)
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex items-center justify-center ">
|
||||
<h2 class="text-2xl">Data Tidak Ada</h2>
|
||||
</aside>
|
||||
|
||||
<!-- Dataset Grid -->
|
||||
<div class="lg:col-span-3">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<p class="text-sm text-slate-500 font-medium"><span id="count-display">{{count($dataset)}}</span> Dataset ditemukan</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase">Urutkan:</label>
|
||||
<select class="bg-transparent border-none text-sm font-bold text-blue-600 focus:ring-0 outline-none cursor-pointer">
|
||||
<option>Terbaru</option>
|
||||
<option>Populer</option>
|
||||
<option>A-Z</option>
|
||||
</select>
|
||||
</div>
|
||||
@endif
|
||||
<br>
|
||||
{{ @$dataset ? @$dataset->links() : '' }}
|
||||
</div>
|
||||
|
||||
<div id="dataset-container" class="space-y-4">
|
||||
<!-- Dataset Item Udara -->
|
||||
@foreach($dataset as $dataSet)
|
||||
<div class="dataset-item bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all" data-category="udara">
|
||||
<div class="flex flex-col md:flex-row justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->instansi->name }}</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->tahun_data }}</span>
|
||||
<span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i> Update: {{ date('d M Y',strtotime($dataSet->created_at)) }}</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-bold text-slate-900 mb-2">{{ $dataSet->name }}</h4>
|
||||
<p class="text-sm text-slate-500 line-clamp-2 mb-4">{{ substr($dataSet->deskripsi,0,150) }}...</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="flex items-center bg-slate-100 text-slate-600 px-2 py-1 rounded text-[10px] font-bold">XLSX</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-col justify-end gap-2 md:w-32">
|
||||
<a href="{{asset('uploads/'.$dataset->file)}}" class="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
|
||||
<i data-lucide="download" class="w-4 h-4 mr-2"></i> Unduh
|
||||
</a>
|
||||
<a href="{{ url('dataset-tambahan/detail/'.encode_id($dataSet->DatasetId)) }}" class="flex-1 md:w-full border border-slate-200 text-slate-700 py-2 px-4 rounded-xl text-sm font-bold hover:bg-slate-50 transition-all flex items-center justify-center">
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i> Detail
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-12">
|
||||
{{ @$dataset ? @$dataset->links() : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@endsection
|
||||
|
|
@ -1,106 +1,126 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@extends('layouts.appNew')
|
||||
@section('content')
|
||||
|
||||
<section class="container relative pt-[150px] py-20 pb-0 px-5 flex flex-col gap-5">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="">Home / <span class="bold">Dataset</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<form action="" method="GET">
|
||||
<div class="relative w-full">
|
||||
<input type="text" name="key" placeholder="Data Apa yang kamu cari ?" style="border:none;" class="w-full placeholder-[#eee] pr-16 py-5 px-5 shadow-lg rounded-full focus:outline-none"/>
|
||||
<button class="absolute top-8 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full" style="background: #E9811A;">
|
||||
<i class="ri-search-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container py-20 px-5">
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<div class="bg-white text-center h-full rounded-[20px] shadow-lg p-5 py-10 gap-3 w-full lg:w-1/4">
|
||||
<form action="" method="GET">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h1 class="bold">Filter</h1>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ri-filter-line text-lg"></i>
|
||||
</div>
|
||||
<!-- Header Section -->
|
||||
<header class="pt-32 pb-12 bg-white border-b border-slate-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Eksplorasi Dataset</h2>
|
||||
<p class="text-slate-600 mt-2">Temukan data mentah kinerja lingkungan hidup</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Instansi</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="instansi_id" id="">
|
||||
<option value="">-- Pilih Instansi --</option>
|
||||
@foreach ($instansi as $dataInstansi)
|
||||
<option {{ decode_id(@request()->instansi_id) == $dataInstansi->MsInstansiId ? 'selected' : '' }} value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Resource Data</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="resource_id" id="">
|
||||
<option value="">-- Pilih Resource Data --</option>
|
||||
@foreach ($template as $dataTemp)
|
||||
<option {{ decode_id(@request()->resource_id) == $dataTemp->MsTemplateId ? 'selected' : '' }} value="{{encode_id($dataTemp->MsTemplateId)}}">{{$dataTemp->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Tahun</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="tahun" id="">
|
||||
<option value="">-- Pilih Tahun --</option>
|
||||
@for($i = date('Y'); $i >= (date('Y')-10); $i--)
|
||||
<option {{ @request()->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="rounded w-full bg-[#E9811A] text-white px-2 py-1">Cari</button>
|
||||
</div>
|
||||
<div class="relative w-full md:w-96 hidden">
|
||||
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5"></i>
|
||||
<input type="text" id="dataset-search" placeholder="Cari nama dataset..." class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/4">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($dataset as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@if(count($dataset) == 0)
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex items-center justify-center ">
|
||||
<h2 class="text-2xl">Data Tidak Ada</h2>
|
||||
</div>
|
||||
@endif
|
||||
<br>
|
||||
{{ @$dataset ? @$dataset->links() : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="space-y-8">
|
||||
<form action="" method="GET">
|
||||
<h3 class="font-bold text-slate-900 mb-4 flex items-center">
|
||||
<i data-lucide="filter" class="w-4 h-4 mr-2"></i> Filter
|
||||
</h3>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 font-bold text-left">Organisasi</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="instansi_id" id="">
|
||||
<option value="">-- Pilih Organisasi --</option>
|
||||
@foreach ($instansi as $dataInstansi)
|
||||
<option {{ decode_id(@request()->instansi_id) == $dataInstansi->MsInstansiId ? 'selected' : '' }} value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 font-bold text-left">Resource Data</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="resource_id" id="">
|
||||
<option value="">-- Pilih Resource Data --</option>
|
||||
@foreach ($template as $dataTemp)
|
||||
<option {{ decode_id(@request()->resource_id) == $dataTemp->MsTemplateId ? 'selected' : '' }} value="{{encode_id($dataTemp->MsTemplateId)}}">{{$dataTemp->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left font-bold">Tahun Data</h1>
|
||||
<select class="p-3 bg-white border text-sm select2 rounded-xl w-full" name="tahun" id="">
|
||||
<option value="">-- Pilih Tahun --</option>
|
||||
@for($i = date('Y'); $i >= (date('Y')-10); $i--)
|
||||
<option {{ @request()->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i> Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="p-6 bg-blue-600 rounded-2xl text-white shadow-xl shadow-blue-200">
|
||||
<i data-lucide="info" class="mb-4"></i>
|
||||
<h4 class="font-bold mb-2">Request Data?</h4>
|
||||
<p class="text-sm text-blue-100 mb-4">Tidak menemukan data yang Anda cari? Silakan ajukan permohonan informasi publik.</p>
|
||||
<button class="w-full bg-white text-blue-600 py-2 rounded-lg font-bold text-sm hover:bg-blue-50 transition-colors">Ajukan Permohonan</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Dataset Grid -->
|
||||
<div class="lg:col-span-3">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<p class="text-sm text-slate-500 font-medium"><span id="count-display">{{count($dataset)}}</span> Dataset ditemukan</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase">Urutkan:</label>
|
||||
<select class="bg-transparent border-none text-sm font-bold text-blue-600 focus:ring-0 outline-none cursor-pointer">
|
||||
<option>Terbaru</option>
|
||||
<option>Populer</option>
|
||||
<option>A-Z</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dataset-container" class="space-y-4">
|
||||
<!-- Dataset Item Udara -->
|
||||
@foreach($dataset as $dataSet)
|
||||
<div class="dataset-item bg-white p-6 rounded-2xl border border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all" data-category="udara">
|
||||
<div class="flex flex-col md:flex-row justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="bg-blue-100 text-blue-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->instansi->name }}</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 text-[10px] font-extrabold px-2 py-0.5 rounded uppercase">{{ $dataSet->tahun_data }}</span>
|
||||
<span class="text-slate-400 text-xs flex items-center"><i data-lucide="calendar" class="w-3 h-3 mr-1"></i> Update: {{ date('d M Y',strtotime($dataSet->created_at)) }}</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-bold text-slate-900 mb-2">{{ $dataSet->name }}</h4>
|
||||
<p class="text-sm text-slate-500 line-clamp-2 mb-4">{{ substr($dataSet->deskripsi,0,150) }}...</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="flex items-center bg-slate-100 text-slate-600 px-2 py-1 rounded text-[10px] font-bold">XLSX</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-col justify-end gap-2 md:w-32">
|
||||
<a href="{{url('opendata/dataset/download/'.encode_id(@$dataSet->DatasetId))}}" class="flex-1 md:w-full bg-blue-600 text-white py-2 px-4 rounded-xl text-sm font-bold hover:bg-blue-700 transition-all flex items-center justify-center">
|
||||
<i data-lucide="download" class="w-4 h-4 mr-2"></i> Unduh
|
||||
</a>
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="flex-1 md:w-full border border-slate-200 text-slate-700 py-2 px-4 rounded-xl text-sm font-bold hover:bg-slate-50 transition-all flex items-center justify-center">
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i> Detail
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-12">
|
||||
{{ @$dataset ? @$dataset->links() : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@section('content')
|
||||
|
||||
<section class="container relative pt-[150px] py-20 pb-0 px-5 flex flex-col gap-5">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="">Home / <span class="bold">Dataset</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<form action="" method="GET">
|
||||
<div class="relative w-full">
|
||||
<input type="text" name="key" placeholder="Data Apa yang kamu cari ?" style="border:none;" class="w-full placeholder-[#eee] pr-16 py-5 px-5 shadow-lg rounded-full focus:outline-none"/>
|
||||
<button class="absolute top-8 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full" style="background: #E9811A;">
|
||||
<i class="ri-search-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container py-20 px-5">
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<div class="bg-white text-center h-full rounded-[20px] shadow-lg p-5 py-10 gap-3 w-full lg:w-1/4">
|
||||
<form action="" method="GET">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h1 class="bold">Filter</h1>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ri-filter-line text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 mt-6">
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Instansi</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="instansi_id" id="">
|
||||
<option value="">-- Pilih Instansi --</option>
|
||||
@foreach ($instansi as $dataInstansi)
|
||||
<option {{ decode_id(@request()->instansi_id) == $dataInstansi->MsInstansiId ? 'selected' : '' }} value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Resource Data</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="resource_id" id="">
|
||||
<option value="">-- Pilih Resource Data --</option>
|
||||
@foreach ($template as $dataTemp)
|
||||
<option {{ decode_id(@request()->resource_id) == $dataTemp->MsTemplateId ? 'selected' : '' }} value="{{encode_id($dataTemp->MsTemplateId)}}">{{$dataTemp->name}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<h1 class="mb-3 text-left">Tahun</h1>
|
||||
<select class="form-input select2 rounded-[20px] w-full" name="tahun" id="">
|
||||
<option value="">-- Pilih Tahun --</option>
|
||||
@for($i = date('Y'); $i >= (date('Y')-10); $i--)
|
||||
<option {{ @request()->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
|
||||
@endfor
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="rounded w-full bg-[#E9811A] text-white px-2 py-1">Cari</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/4">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($dataset as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@if(count($dataset) == 0)
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex items-center justify-center ">
|
||||
<h2 class="text-2xl">Data Tidak Ada</h2>
|
||||
</div>
|
||||
@endif
|
||||
<br>
|
||||
{{ @$dataset ? @$dataset->links() : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -1,222 +1,161 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@extends('layouts.appNew')
|
||||
@section('content')
|
||||
<!-- Navbar -->
|
||||
<!-- Navbar -->
|
||||
|
||||
<?php $asset = asset('assets/Background.png'); ?>
|
||||
<section
|
||||
class="relative h-[90vh] mb-10 md:h-screen bg-cover bg-center flex items-center bg-[#1E4D8B] md:bg-white md:bg-[url({{ $asset }})]"
|
||||
style="">
|
||||
|
||||
<div class="container relative z-10 mx-auto px-6">
|
||||
<h2 class="text-3xl md:text-4xl active font-bold text-white mb-4">Dokumen Informasi Kinerja</h2>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-2">Pengelolaan Lingkungan Hidup Daerah</h3>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-6">Provinsi DKI Jakarta</h3>
|
||||
<p class="text-white mb-6 md:w-130">
|
||||
Dinas Lingkungan Hidup di tingkat daerah, menyediakan data dan informasi
|
||||
tentang kondisi lingkungan hidup dan kinerja pengelolaan lingkungan di wilayahnya.
|
||||
</p>
|
||||
<form action="{{ url('dataset') }}" method="GET">
|
||||
<div class="relative w-full max-w-md">
|
||||
<!-- Input -->
|
||||
<input
|
||||
name="key"
|
||||
type="text"
|
||||
placeholder="Apa yang ingin kamu cari ?"
|
||||
style="border: none;"
|
||||
class="w-full pl-5 pr-16 py-5 rounded-full text-[#fff] focus:outline-none"
|
||||
/>
|
||||
<!-- Tombol cari -->
|
||||
<button
|
||||
class="absolute top-8 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full"
|
||||
style="background: #E9811A;">
|
||||
<i class="ri-search-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="container relative z-10 mx-auto px-6 md:-mt-45 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-[#F08787] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<!-- Hero Section -->
|
||||
<header class="relative pt-32 pb-20 overflow-hidden">
|
||||
<div class="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-blue-50 to-transparent rounded-bl-full opacity-50"></div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Dataset</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.5 8C16.4887 8 10 11.2817 10 15.3333C10 19.385 16.4887 22.6667 24.5 22.6667C32.5112 22.6667 39 19.385 39 15.3333C39 11.2817 32.5112 8 24.5 8ZM10 19V24.5C10 28.5517 16.4887 31.8333 24.5 31.8333C32.5112 31.8333 39 28.5517 39 24.5V19C39 23.0517 32.5112 26.3333 24.5 26.3333C16.4887 26.3333 10 23.0517 10 19ZM10 28.1667V33.6667C10 37.7183 16.4887 41 24.5 41C32.5112 41 39 37.7183 39 33.6667V28.1667C39 32.2183 32.5112 35.5 24.5 35.5C16.4887 35.5 10 32.2183 10 28.1667Z" fill="white"/>
|
||||
</svg>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['dataset'] }}">{{ $count['dataset'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-[#A3DC9A] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Resource Data</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.6875 20.9271L42.875 25.5208L24.5 34.7083L6.125 25.5208L15.3125 20.9271M33.6875 31.1354L42.875 35.7292L24.5 44.9167L6.125 35.7292L15.3125 31.1354M24.5 6.125L42.875 15.3125L24.5 24.5L6.125 15.3125L24.5 6.125Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['resource'] }}">{{ $count['resource'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-[#7F55B1] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Instansi Terintegrasi</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.526 45.9283C12.7216 45.9283 3.10843 36.335 3.08852 24.5275C3.0761 21.7112 3.62273 18.9204 4.69673 16.3169C5.77073 13.7134 7.35074 11.3489 9.34521 9.36047L11.515 11.5226C9.80564 13.2272 8.4514 15.2539 7.53067 17.4854C6.60993 19.7169 6.141 22.1089 6.15103 24.5229C6.14865 26.937 6.62517 29.3275 7.553 31.5561C8.48083 33.7848 9.84154 35.8072 11.5563 37.5064C13.2577 39.2112 15.2796 40.5625 17.5055 41.4823C19.7315 42.4022 22.1175 42.8723 24.526 42.8658H24.5567C26.579 42.8678 28.5873 42.5303 30.4979 41.8674L31.5116 44.7584C29.2771 45.5345 26.9282 45.93 24.5628 45.9283H24.526Z" fill="white"/>
|
||||
<path d="M22.9688 24.5H26.0312V30.625H29.0938C29.906 30.625 30.6849 30.9477 31.2593 31.522C31.8336 32.0963 32.1562 32.8753 32.1562 33.6875V38.2812H29.0938V33.6875H26.0312V38.2812H22.9688V33.6875H19.9062V38.2812H16.8438V33.6875C16.8438 32.8753 17.1664 32.0963 17.7407 31.522C18.3151 30.9477 19.094 30.625 19.9062 30.625H22.9688V24.5ZM35.2188 39.8125C35.6249 39.8125 36.0143 39.9738 36.3015 40.261C36.5887 40.5482 36.75 40.9376 36.75 41.3438C36.75 41.7499 36.5887 42.1393 36.3015 42.4265C36.0143 42.7137 35.6249 42.875 35.2188 42.875C34.8126 42.875 34.4232 42.7137 34.136 42.4265C33.8488 42.1393 33.6875 41.7499 33.6875 41.3438C33.6875 40.9376 33.8488 40.5482 34.136 40.261C34.4232 39.9738 34.8126 39.8125 35.2188 39.8125ZM13.7812 6.125C14.1874 6.125 14.5768 6.28633 14.864 6.57349C15.1512 6.86066 15.3125 7.25014 15.3125 7.65625C15.3125 8.06236 15.1512 8.45184 14.864 8.73901C14.5768 9.02617 14.1874 9.1875 13.7812 9.1875C13.3751 9.1875 12.9857 9.02617 12.6985 8.73901C12.4113 8.45184 12.25 8.06236 12.25 7.65625C12.25 7.25014 12.4113 6.86066 12.6985 6.57349C12.9857 6.28633 13.3751 6.125 13.7812 6.125Z" fill="white"/>
|
||||
<path d="M32.0338 15.4748C31.3876 11.9039 28.2546 9.1875 24.5 9.1875C20.7454 9.1875 17.6124 11.9039 16.9662 15.4748C15.6247 15.7947 14.4299 16.5568 13.5744 17.6385C12.7188 18.7202 12.2523 20.0584 12.25 21.4375C12.25 24.8154 14.9971 27.5625 18.375 27.5625H19.9062V24.5H18.375C16.686 24.5 15.3125 23.1265 15.3125 21.4375C15.3125 19.7485 16.686 18.375 18.375 18.375H19.9062V16.8438C19.9062 14.3111 21.9673 12.25 24.5 12.25C27.0327 12.25 29.0938 14.3111 29.0938 16.8438V18.375H30.625C32.314 18.375 33.6875 19.7501 33.6875 21.4375C33.6875 23.1249 32.314 24.5 30.625 24.5H29.0938V27.5625H30.625C34.0029 27.5625 36.75 24.8154 36.75 21.4375C36.7477 20.0584 36.2812 18.7202 35.4256 17.6385C34.5701 16.5568 33.3753 15.7947 32.0338 15.4748Z" fill="white"/>
|
||||
<path d="M39.6594 39.6426L37.4942 37.4759C39.2061 35.7743 40.5636 33.7502 41.488 31.5205C42.4124 29.2908 42.8854 26.9 42.8796 24.4863C42.8796 14.3555 34.6369 6.11127 24.5046 6.11127C22.4374 6.11127 20.4391 6.44355 18.5618 7.0974L17.5543 4.2064C19.7899 3.43426 22.1394 3.04295 24.5046 3.04877C36.3259 3.04877 45.9421 12.665 45.9421 24.4863C45.9421 30.2086 43.7111 35.5909 39.6594 39.6426Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['instansi'] }}">{{ $count['instansi'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contianer relative px-10 pt-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div class="">
|
||||
<img src="{{ asset('assets/character 2.png') }}" class="left-0">
|
||||
</div>
|
||||
<div class="p-5 flex flex-col gap-3">
|
||||
<h3 class="text-3xl poppins-bold active">Resource Data Terbaru</h3>
|
||||
<p class="lg:w-150">Temukan informasi terbaru dan terpercaya dari koleksi 60 resource data kami. Berikut beberapa data pilihan yang dapat Anda akses langsung. Untuk melihat semua data, silakan kunjungi halaman penuh</p>
|
||||
<div class="flex flex-col mt-10 gap-5">
|
||||
@foreach($template as $dataTemp)
|
||||
<div class="flex">
|
||||
<div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
|
||||
<a href="">{{ $dataTemp->name }} <i class="ri-arrow-right-line ml-10"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contianer relative pt-20">
|
||||
<div class="flex gap-7 md:gap-3 bg-[#F0F0F0] p-10 overflow-x-auto">
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>Dinas Lingkungan Hidup</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/mrt.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>MRT Jakarta</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/kai.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>KAI Commuter Line</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/pam.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>PAM Jaya</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>Dinas Perhubungan</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container relative px-10 py-20">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('dataset') }}" class="p-3 bg-[#1E4D8B] text-white rounded-full">Lihat Semua Dataset</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@foreach($dataset as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
<span class="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold mb-4">
|
||||
Portal Informasi Kinerja Lingkungan
|
||||
</span>
|
||||
<h2 class="text-5xl font-extrabold text-slate-900 leading-tight mb-6">
|
||||
Wujudkan Jakarta <span class="text-blue-600 underline decoration-blue-200 underline-offset-8">Berkelanjutan</span> Melalui Transparansi Data
|
||||
</h2>
|
||||
<p class="text-lg text-slate-600 mb-8 max-w-lg">
|
||||
Sistem informasi terintegrasi untuk pemantauan kinerja pengelolaan lingkungan hidup Provinsi DKI Jakarta berbasis kerangka kerja DPSIR.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="{{ url('dataset') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition-all transform hover:-translate-y-1 shadow-xl">
|
||||
<span>Cari Data Spesifik</span>
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</a>
|
||||
{{-- <button class="flex items-center space-x-2 bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-all">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
<span>Cari Data Spesifik</span>
|
||||
</button> --}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Data Panel -->
|
||||
<div id="data-panel" class="relative">
|
||||
<div class="bg-white p-6 rounded-3xl shadow-2xl border border-slate-100 relative z-10">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="font-bold text-slate-800">Capaian Indikator Utama</h3>
|
||||
<i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Stat Item 1 -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="p-3 bg-white rounded-xl shadow-sm text-blue-500">
|
||||
<i data-lucide="wind"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-500 font-medium">Indeks Kualitas Udara</p>
|
||||
<p class="font-bold text-xl">78 <span class="text-xs font-normal text-slate-400">ISPU</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold px-2 py-1 rounded-md bg-yellow-100 text-yellow-700">Sedang</span>
|
||||
</div>
|
||||
<!-- Stat Item 2 -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="p-3 bg-white rounded-xl shadow-sm text-orange-500">
|
||||
<i data-lucide="trash-2"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-500 font-medium">Timbulan Sampah</p>
|
||||
<p class="font-bold text-xl">7.5k <span class="text-xs font-normal text-slate-400">Ton/Hari</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold px-2 py-1 rounded-md bg-green-100 text-green-700">Terkelola</span>
|
||||
</div>
|
||||
<!-- Stat Item 3 -->
|
||||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
|
||||
<i data-lucide="droplets"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-500 font-medium">Kualitas Air</p>
|
||||
<p class="font-bold text-xl">62.4 <span class="text-xs font-normal text-slate-400">IKA</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative Blobs -->
|
||||
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-green-200 rounded-full blur-3xl opacity-40 -z-10"></div>
|
||||
<div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-200 rounded-full blur-3xl opacity-40 -z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</header>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- DPSIR Framework -->
|
||||
<section class="py-20 bg-blue-900 text-white overflow-hidden relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h3 class="text-3xl font-bold mb-4">Kerangka Kerja DPSIR</h3>
|
||||
<p class="text-blue-200 max-w-2xl mx-auto mb-16">
|
||||
Analisis hubungan kausalitas antara aktivitas manusia dan perubahan lingkungan untuk merumuskan respon kebijakan yang tepat.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
|
||||
<div class="text-4xl font-black mb-4 text-blue-400">D</div>
|
||||
<h4 class="font-bold mb-2 text-lg">Driving Force</h4>
|
||||
<p class="text-sm opacity-70">Pertumbuhan penduduk & aktivitas ekonomi kota.</p>
|
||||
</div>
|
||||
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
|
||||
<div class="text-4xl font-black mb-4 text-blue-400">P</div>
|
||||
<h4 class="font-bold mb-2 text-lg">Pressure</h4>
|
||||
<p class="text-sm opacity-70">Emisi kendaraan, limbah industri & konsumsi air.</p>
|
||||
</div>
|
||||
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
|
||||
<div class="text-4xl font-black mb-4 text-blue-400">S</div>
|
||||
<h4 class="font-bold mb-2 text-lg">State</h4>
|
||||
<p class="text-sm opacity-70">Kondisi riil kualitas udara, air & tutupan lahan.</p>
|
||||
</div>
|
||||
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
|
||||
<div class="text-4xl font-black mb-4 text-blue-400">I</div>
|
||||
<h4 class="font-bold mb-2 text-lg">Impact</h4>
|
||||
<p class="text-sm opacity-70">Dampak pada kesehatan warga & ekosistem perkotaan.</p>
|
||||
</div>
|
||||
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
|
||||
<div class="text-4xl font-black mb-4 text-blue-400">R</div>
|
||||
<h4 class="font-bold mb-2 text-lg">Response</h4>
|
||||
<p class="text-sm opacity-70">Kebijakan pemerintah, inovasi & peran masyarakat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Publication Section -->
|
||||
<section id="publikasi" class="py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div class="max-w-xl">
|
||||
<h3 class="text-3xl font-bold text-slate-900 mb-4 tracking-tight">Dokumen Publikasi</h3>
|
||||
<p class="text-slate-600">Akses seluruh arsip Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah dari tahun ke tahun</p>
|
||||
</div>
|
||||
{{-- <div class="flex space-x-2">
|
||||
<button class="year-filter px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg" data-year="all">Semua Tahun</button>
|
||||
<button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2024">2024</button>
|
||||
<button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2023">2023</button>
|
||||
</div> --}}
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<!-- Report Card 1 -->
|
||||
@foreach($dataset as $dataSet)
|
||||
<div class="report-card bg-white rounded-2xl p-6 border border-slate-200 hover:border-blue-400 hover:shadow-xl transition-all group" data-year="2024">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-md text-sm font-bold">{{ $dataSet->tahun_data }}</div>
|
||||
<i data-lucide="file-text" class="text-slate-300 group-hover:text-blue-500 transition-colors"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-slate-800 mb-2 leading-tight h-12">{{ $dataSet->name }}</h4>
|
||||
<div class="flex items-center text-xs text-slate-400 mb-6 space-x-4">
|
||||
<span class="flex items-center"><i data-lucide="info" class="w-3 h-3 mr-1"></i> {{ $dataSet->instansi->name }}</span>
|
||||
</div>
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="w-full flex items-center justify-center space-x-2 bg-slate-50 text-slate-700 py-3 rounded-xl font-bold group-hover:bg-blue-600 group-hover:text-white transition-all">
|
||||
<i data-lucide="eye" class="w-5 h-5"></i>
|
||||
<span>Lihat Detail</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
@extends('layouts.app')
|
||||
@section('css')
|
||||
@endsection
|
||||
@section('content')
|
||||
<!-- Navbar -->
|
||||
<!-- Navbar -->
|
||||
|
||||
<?php $asset = asset('assets/Background.png'); ?>
|
||||
<section
|
||||
class="relative h-[90vh] mb-10 md:h-screen bg-cover bg-center flex items-center bg-[#1E4D8B] md:bg-white md:bg-[url({{ $asset }})]"
|
||||
style="">
|
||||
|
||||
<div class="container relative z-10 mx-auto px-6">
|
||||
<h2 class="text-3xl md:text-4xl active font-bold text-white mb-4">Dokumen Informasi Kinerja</h2>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-2">Pengelolaan Lingkungan Hidup Daerah</h3>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-6">Provinsi DKI Jakarta</h3>
|
||||
<p class="text-white mb-6 md:w-130">
|
||||
Dinas Lingkungan Hidup di tingkat daerah, menyediakan data dan informasi
|
||||
tentang kondisi lingkungan hidup dan kinerja pengelolaan lingkungan di wilayahnya.
|
||||
</p>
|
||||
<form action="{{ url('dataset') }}" method="GET">
|
||||
<div class="relative w-full max-w-md">
|
||||
<!-- Input -->
|
||||
<input
|
||||
name="key"
|
||||
type="text"
|
||||
placeholder="Apa yang ingin kamu cari ?"
|
||||
style="border: none;"
|
||||
class="w-full pl-5 pr-16 py-5 rounded-full text-[#fff] focus:outline-none"
|
||||
/>
|
||||
<!-- Tombol cari -->
|
||||
<button
|
||||
class="absolute top-8 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full"
|
||||
style="background: #E9811A;">
|
||||
<i class="ri-search-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="container relative z-10 mx-auto px-6 md:-mt-45 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-[#F08787] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Dataset</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.5 8C16.4887 8 10 11.2817 10 15.3333C10 19.385 16.4887 22.6667 24.5 22.6667C32.5112 22.6667 39 19.385 39 15.3333C39 11.2817 32.5112 8 24.5 8ZM10 19V24.5C10 28.5517 16.4887 31.8333 24.5 31.8333C32.5112 31.8333 39 28.5517 39 24.5V19C39 23.0517 32.5112 26.3333 24.5 26.3333C16.4887 26.3333 10 23.0517 10 19ZM10 28.1667V33.6667C10 37.7183 16.4887 41 24.5 41C32.5112 41 39 37.7183 39 33.6667V28.1667C39 32.2183 32.5112 35.5 24.5 35.5C16.4887 35.5 10 32.2183 10 28.1667Z" fill="white"/>
|
||||
</svg>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['dataset'] }}">{{ $count['dataset'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-[#A3DC9A] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Resource Data</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.6875 20.9271L42.875 25.5208L24.5 34.7083L6.125 25.5208L15.3125 20.9271M33.6875 31.1354L42.875 35.7292L24.5 44.9167L6.125 35.7292L15.3125 31.1354M24.5 6.125L42.875 15.3125L24.5 24.5L6.125 15.3125L24.5 6.125Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['resource'] }}">{{ $count['resource'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-[#7F55B1] rounded-2xl shadow-lg p-6 text-white text-left">
|
||||
<div class="relative z-10 flex flex-col gap-6 justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Instansi Terintegrasi</h3>
|
||||
</div>
|
||||
<div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
|
||||
<svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.526 45.9283C12.7216 45.9283 3.10843 36.335 3.08852 24.5275C3.0761 21.7112 3.62273 18.9204 4.69673 16.3169C5.77073 13.7134 7.35074 11.3489 9.34521 9.36047L11.515 11.5226C9.80564 13.2272 8.4514 15.2539 7.53067 17.4854C6.60993 19.7169 6.141 22.1089 6.15103 24.5229C6.14865 26.937 6.62517 29.3275 7.553 31.5561C8.48083 33.7848 9.84154 35.8072 11.5563 37.5064C13.2577 39.2112 15.2796 40.5625 17.5055 41.4823C19.7315 42.4022 22.1175 42.8723 24.526 42.8658H24.5567C26.579 42.8678 28.5873 42.5303 30.4979 41.8674L31.5116 44.7584C29.2771 45.5345 26.9282 45.93 24.5628 45.9283H24.526Z" fill="white"/>
|
||||
<path d="M22.9688 24.5H26.0312V30.625H29.0938C29.906 30.625 30.6849 30.9477 31.2593 31.522C31.8336 32.0963 32.1562 32.8753 32.1562 33.6875V38.2812H29.0938V33.6875H26.0312V38.2812H22.9688V33.6875H19.9062V38.2812H16.8438V33.6875C16.8438 32.8753 17.1664 32.0963 17.7407 31.522C18.3151 30.9477 19.094 30.625 19.9062 30.625H22.9688V24.5ZM35.2188 39.8125C35.6249 39.8125 36.0143 39.9738 36.3015 40.261C36.5887 40.5482 36.75 40.9376 36.75 41.3438C36.75 41.7499 36.5887 42.1393 36.3015 42.4265C36.0143 42.7137 35.6249 42.875 35.2188 42.875C34.8126 42.875 34.4232 42.7137 34.136 42.4265C33.8488 42.1393 33.6875 41.7499 33.6875 41.3438C33.6875 40.9376 33.8488 40.5482 34.136 40.261C34.4232 39.9738 34.8126 39.8125 35.2188 39.8125ZM13.7812 6.125C14.1874 6.125 14.5768 6.28633 14.864 6.57349C15.1512 6.86066 15.3125 7.25014 15.3125 7.65625C15.3125 8.06236 15.1512 8.45184 14.864 8.73901C14.5768 9.02617 14.1874 9.1875 13.7812 9.1875C13.3751 9.1875 12.9857 9.02617 12.6985 8.73901C12.4113 8.45184 12.25 8.06236 12.25 7.65625C12.25 7.25014 12.4113 6.86066 12.6985 6.57349C12.9857 6.28633 13.3751 6.125 13.7812 6.125Z" fill="white"/>
|
||||
<path d="M32.0338 15.4748C31.3876 11.9039 28.2546 9.1875 24.5 9.1875C20.7454 9.1875 17.6124 11.9039 16.9662 15.4748C15.6247 15.7947 14.4299 16.5568 13.5744 17.6385C12.7188 18.7202 12.2523 20.0584 12.25 21.4375C12.25 24.8154 14.9971 27.5625 18.375 27.5625H19.9062V24.5H18.375C16.686 24.5 15.3125 23.1265 15.3125 21.4375C15.3125 19.7485 16.686 18.375 18.375 18.375H19.9062V16.8438C19.9062 14.3111 21.9673 12.25 24.5 12.25C27.0327 12.25 29.0938 14.3111 29.0938 16.8438V18.375H30.625C32.314 18.375 33.6875 19.7501 33.6875 21.4375C33.6875 23.1249 32.314 24.5 30.625 24.5H29.0938V27.5625H30.625C34.0029 27.5625 36.75 24.8154 36.75 21.4375C36.7477 20.0584 36.2812 18.7202 35.4256 17.6385C34.5701 16.5568 33.3753 15.7947 32.0338 15.4748Z" fill="white"/>
|
||||
<path d="M39.6594 39.6426L37.4942 37.4759C39.2061 35.7743 40.5636 33.7502 41.488 31.5205C42.4124 29.2908 42.8854 26.9 42.8796 24.4863C42.8796 14.3555 34.6369 6.11127 24.5046 6.11127C22.4374 6.11127 20.4391 6.44355 18.5618 7.0974L17.5543 4.2064C19.7899 3.43426 22.1394 3.04295 24.5046 3.04877C36.3259 3.04877 45.9421 12.665 45.9421 24.4863C45.9421 30.2086 43.7111 35.5909 39.6594 39.6426Z" fill="white"/>
|
||||
</svg>
|
||||
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
|
||||
<div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="{{ $count['instansi'] }}">{{ $count['instansi'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contianer relative px-10 pt-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div class="">
|
||||
<img src="{{ asset('assets/character 2.png') }}" class="left-0">
|
||||
</div>
|
||||
<div class="p-5 flex flex-col gap-3">
|
||||
<h3 class="text-3xl poppins-bold active">Resource Data Terbaru</h3>
|
||||
<p class="lg:w-150">Temukan informasi terbaru dan terpercaya dari koleksi 60 resource data kami. Berikut beberapa data pilihan yang dapat Anda akses langsung. Untuk melihat semua data, silakan kunjungi halaman penuh</p>
|
||||
<div class="flex flex-col mt-10 gap-5">
|
||||
@foreach($template as $dataTemp)
|
||||
<div class="flex">
|
||||
<div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
|
||||
<a href="">{{ $dataTemp->name }} <i class="ri-arrow-right-line ml-10"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contianer relative pt-20">
|
||||
<div class="flex gap-7 md:gap-3 bg-[#F0F0F0] p-10 overflow-x-auto">
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>Dinas Lingkungan Hidup</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/mrt.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>MRT Jakarta</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/kai.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>KAI Commuter Line</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/pam.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>PAM Jaya</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
|
||||
<div class="mx-auto">
|
||||
<img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="" class="">
|
||||
</div>
|
||||
<div class="mx-auto">
|
||||
<h1>Dinas Perhubungan</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container relative px-10 py-20">
|
||||
<div class="relative flex justify-between items-center content-center mb-10">
|
||||
<div>
|
||||
<h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('dataset') }}" class="p-3 bg-[#1E4D8B] text-white rounded-full">Lihat Semua Dataset</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@foreach($dataset as $dataSet)
|
||||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="transition duration-300 ease-in-out hover:-translate-y-100 hover:scale-410">
|
||||
<div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-6 flex">
|
||||
<div class="flex flex-col gap-3 items-center text-center">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<img src="{{ asset('logodki.png') }}" alt="" width="50" class="">
|
||||
{{-- <img src="{{ asset('uploads/'.@$dataSet->instansi->logo) }}" alt="" width="50" class=""> --}}
|
||||
<h1 class="font-bold">{{ $dataSet->instansi->name }}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h5 class="font-bold">{{ $dataSet->name }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ substr($dataSet->deskripsi,0,50) }}</p>
|
||||
</div>
|
||||
<div class="mt-1 flex flex-row gap-2 items-center">
|
||||
<span class="rounded-full text-[10px] bg-[#E9811A] text-white px-2 py-1">{{$dataSet->tahun}}</span>
|
||||
<span class="rounded-full text-[10px] hidden lg:block bg-[#E9811A] text-white px-2 py-1">{{ substr($dataSet->tabelData->name,0,25) }}...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<!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="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></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">
|
||||
<div class="bg-blue-600 p-2 rounded-lg text-white">
|
||||
<i data-lucide="layers" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<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">DKI Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#" 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> --}}
|
||||
<button 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>
|
||||
</button>
|
||||
</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="#" class="block font-medium py-2">Beranda</a>
|
||||
<a href="#data-panel" class="block font-medium py-2">Data Panel</a>
|
||||
<a href="#publikasi" class="block font-medium py-2">Publikasi</a>
|
||||
<button class="w-full bg-blue-600 text-white px-5 py-3 rounded-xl font-bold">Login Portal</button>
|
||||
</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">
|
||||
<div class="bg-blue-600 p-1.5 rounded-lg text-white">
|
||||
<i data-lucide="layers" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<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="https://code.jquery.com/jquery-3.7.1.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>
|
||||
|
|
@ -7,6 +7,7 @@ use App\Http\Controllers\Auth\CustomLoginController;
|
|||
use App\Http\Controllers\Auth\CustomRegisterController;
|
||||
use App\Http\Controllers\AjaxController;
|
||||
use App\Http\Controllers\Opendata\DatasetController;
|
||||
use App\Http\Controllers\BeritaController;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
@ -20,10 +21,19 @@ use App\Http\Controllers\Opendata\DatasetController;
|
|||
*/
|
||||
|
||||
Route::get('/test', function(){
|
||||
return \App\Models\Dataset\DatasetTable1::legend();
|
||||
return view('dashboardtest');
|
||||
});
|
||||
|
||||
//berita
|
||||
Route::resource('/berita', BeritaController::class);
|
||||
Route::post('/berita', [BeritaController::class,'store']);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Route::get('/', [FrontController::class,'index'])->name('index');
|
||||
|
||||
Route::get('/resource-data', [FrontController::class,'resource'])->name('resource');
|
||||
Route::get('/dataset', [FrontController::class,'dataset'])->name('dataset');
|
||||
Route::get('/dataset/detail/{id}', [FrontController::class,'dataset_detail'])->name('dataset_detail');
|
||||
|
|
|
|||
Loading…
Reference in New Issue