Add 'Rencana Aksi' page and update routing; enhance UI with new images
parent
d04226e31f
commit
63104d83ea
|
|
@ -15,4 +15,9 @@ class FrontController extends Controller
|
|||
// return redirect('login');
|
||||
return view('index',$data);
|
||||
}
|
||||
|
||||
function rencanaAksi() {
|
||||
$data['title'] = 'Rencana Aksi';
|
||||
return view('rencana-aksi',$data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
|
|
@ -7,7 +7,7 @@
|
|||
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px] leading-[110%] tracking-[-0.03em]">Gas Rumah Kaca Daerah</h1>
|
||||
<p class="mb-0 text-[#878C91] md:w-[70%] pt-12">Platform terintegrasi untuk memantau, melaporkan, dan mengevaluasi status emisi GRK serta kemajuan Rencana Aksi Mitigasi di wilayah Jakarta. Akses data inventarisasi terbaru dan peran serta publik.</p>
|
||||
<div class="flex flex-col md:flex-row gap-10 md:gap-3 mt-20">
|
||||
<div><a href="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <i class="bx bx-right-arrow-alt"></i></a></div>
|
||||
<div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <i class="bx bx-right-arrow-alt"></i></a></div>
|
||||
<div><a href="" class="btn-minimal btn-secondary rounded-full px-10 py-4">Akses Dashboard Terbaru</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
|
||||
<div><a href="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <i class="bx bx-right-arrow-alt"></i></a></div>
|
||||
<div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <i class="bx bx-right-arrow-alt"></i></a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,312 +1,317 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>@yield('title',@$title) | SIGD</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="SIDG" name="description" />
|
||||
<meta content="ilhamwara" name="author" />
|
||||
<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">
|
||||
<!-- App favicon -->
|
||||
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
|
||||
<!-- Bootstrap Css -->
|
||||
{{-- <link href="{{asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" /> --}}
|
||||
<!-- Icons Css -->
|
||||
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
|
||||
<!-- App Css-->
|
||||
<link href="{{asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-table.min.css')}}">
|
||||
<link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<!-- alertifyjs Css -->
|
||||
<link href="{{ asset('assets/libs/alertifyjs/build/css/alertify.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<link href="{{ asset('assets/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- alertifyjs default themes Css -->
|
||||
<link href="{{ asset('assets/libs/alertifyjs/build/css/themes/default.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
}
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>@yield('title',@$title) | SIGD</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="SIDG" name="description" />
|
||||
<meta content="ilhamwara" name="author" />
|
||||
<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">
|
||||
<!-- App favicon -->
|
||||
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
|
||||
<!-- Bootstrap Css -->
|
||||
{{-- <link href="{{asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" /> --}}
|
||||
<!-- Icons Css -->
|
||||
<link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css" />
|
||||
<!-- App Css-->
|
||||
<link href="{{asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-table.min.css')}}">
|
||||
<link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<!-- alertifyjs Css -->
|
||||
<link href="{{ asset('assets/libs/alertifyjs/build/css/alertify.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<link href="{{ asset('assets/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
<!-- alertifyjs default themes Css -->
|
||||
<link href="{{ asset('assets/libs/alertifyjs/build/css/themes/default.min.css') }}" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Modern Minimalist Button Hover Animations */
|
||||
.btn-minimal {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.btn-minimal:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-minimal:active {
|
||||
transform: translateY(-1px);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
/* Modern Minimalist Button Hover Animations */
|
||||
.btn-minimal {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Primary button (blue background) */
|
||||
.btn-minimal.btn-primary {
|
||||
background-color: #2084FF;
|
||||
}
|
||||
.btn-minimal:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-minimal.btn-primary:hover {
|
||||
background-color: #1a6fd9;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.btn-minimal:active {
|
||||
transform: translateY(-1px);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* Secondary button (border only) */
|
||||
.btn-minimal.btn-secondary {
|
||||
border: 1px solid currentColor;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* Primary button (blue background) */
|
||||
.btn-minimal.btn-primary {
|
||||
background-color: #2084FF;
|
||||
}
|
||||
|
||||
.btn-minimal.btn-secondary:hover {
|
||||
background-color: #2084FF;
|
||||
color: white;
|
||||
border-color: #2084FF;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.btn-minimal.btn-primary:hover {
|
||||
background-color: #1a6fd9;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Outline button */
|
||||
.btn-minimal.btn-outline:hover {
|
||||
background-color: rgba(32, 132, 255, 0.1);
|
||||
border-color: #2084FF;
|
||||
color: #2084FF;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
/* Secondary button (border only) */
|
||||
.btn-minimal.btn-secondary {
|
||||
border: 1px solid currentColor;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Icon button */
|
||||
.btn-minimal.btn-icon:hover {
|
||||
transform: rotate(5deg) scale(1.1);
|
||||
}
|
||||
.btn-minimal.btn-secondary:hover {
|
||||
background-color: #2084FF;
|
||||
color: white;
|
||||
border-color: #2084FF;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Tab button */
|
||||
.btn-minimal.btn-tab {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Outline button */
|
||||
.btn-minimal.btn-outline:hover {
|
||||
background-color: rgba(32, 132, 255, 0.1);
|
||||
border-color: #2084FF;
|
||||
color: #2084FF;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.btn-minimal.btn-tab:hover {
|
||||
background-color: white !important;
|
||||
color: #2084FF !important;
|
||||
border-color: white;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
/* Icon button */
|
||||
.btn-minimal.btn-icon:hover {
|
||||
transform: rotate(5deg) scale(1.1);
|
||||
}
|
||||
|
||||
/* Link button */
|
||||
.btn-minimal.btn-link:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
/* Tab button */
|
||||
.btn-minimal.btn-tab {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-minimal.btn-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: currentColor;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.btn-minimal.btn-tab:hover {
|
||||
background-color: white !important;
|
||||
color: #2084FF !important;
|
||||
border-color: white;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.btn-minimal.btn-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
/* Link button */
|
||||
.btn-minimal.btn-link:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
/* FAQ Static Styles */
|
||||
.faq-content {
|
||||
/* Always visible */
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-minimal.btn-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: currentColor;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Information Card Hover Animations */
|
||||
.info-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.btn-minimal.btn-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.7) 100%);
|
||||
z-index: 1;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
/* FAQ Static Styles */
|
||||
.faq-content {
|
||||
/* Always visible */
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
/* Information Card Hover Animations */
|
||||
.info-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.info-card:hover::before {
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.8) 100%);
|
||||
}
|
||||
.info-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.7) 100%);
|
||||
z-index: 1;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card .content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@yield('css')
|
||||
</head>
|
||||
<body>
|
||||
<section class="absolute">
|
||||
<img src="{{ asset('assets/images/bg-front.png') }}" alt="">
|
||||
</section>
|
||||
<section class="navbar px-5 py-8 relative container mx-auto hidden md:block">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex gap-[50px] items-center">
|
||||
<div><a href=""><img src="{{ asset('assets/images/logo.png') }}" width="120" alt=""></a></div>
|
||||
<div class="flex gap-4">
|
||||
<a href="">Edukasi & Regulasi</a>
|
||||
<a href="">Dokumentasi</a>
|
||||
<a href="">Inventarisasi</a>
|
||||
</div>
|
||||
.info-card:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.info-card:hover::before {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.8) 100%);
|
||||
}
|
||||
|
||||
.info-card .content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@yield('css')
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="{{ route('index') }}" class="absolute">
|
||||
<img src="{{ asset('assets/images/bg-front.png') }}" alt="">
|
||||
</a>
|
||||
|
||||
<section class="navbar px-5 py-8 relative container mx-auto hidden md:block">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex gap-[50px] items-center">
|
||||
<div><a href="{{ route('index') }}"><img src="{{ asset('assets/images/logo.png') }}" width="120" alt=""></a></div>
|
||||
<div class="flex gap-4">
|
||||
<a href="">Edukasi & Regulasi</a>
|
||||
<a href="">Dokumentasi</a>
|
||||
<a href="">Inventarisasi</a>
|
||||
</div>
|
||||
<div><a href="{{ url('login') }}" class="rounded-full px-6 py-3 border">Login</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="navbar px-5 pt-8 relative container mx-auto md:hidden">
|
||||
<div><a href="#" class="px-4 py-3 text-[20px]"><i class="bx bx-menu"></i></a></div>
|
||||
</section>
|
||||
<div><a href="{{ url('login') }}" class="rounded-full px-6 py-3 border">Login</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="navbar px-5 pt-8 relative container mx-auto md:hidden">
|
||||
<div><a href="#" class="px-4 py-3 text-[20px]"><i class="bx bx-menu"></i></a></div>
|
||||
</section>
|
||||
|
||||
@yield('content')
|
||||
{{-- <script src="{{asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script> --}}
|
||||
<script src="{{asset('assets/libs/metismenujs/metismenujs.min.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/eva-icons/eva.min.js')}}"></script>
|
||||
@yield('content')
|
||||
{{-- <script src="{{asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script> --}}
|
||||
<script src="{{asset('assets/libs/metismenujs/metismenujs.min.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
|
||||
<script src="{{asset('assets/libs/eva-icons/eva.min.js')}}"></script>
|
||||
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
|
||||
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/libs/alertifyjs/build/alertify.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
<script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
|
||||
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/libs/alertifyjs/build/alertify.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Simple fade-in animation
|
||||
const fadeElements = document.querySelectorAll('.fade-in');
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Simple fade-in animation
|
||||
const fadeElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
if (fadeElements.length === 0) {
|
||||
console.log('No fade-in elements found');
|
||||
return;
|
||||
}
|
||||
if (fadeElements.length === 0) {
|
||||
console.log('No fade-in elements found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Found ' + fadeElements.length + ' fade-in elements');
|
||||
console.log('Found ' + fadeElements.length + ' fade-in elements');
|
||||
|
||||
// Show first element immediately
|
||||
if (fadeElements[0]) {
|
||||
setTimeout(() => {
|
||||
fadeElements[0].classList.add('visible');
|
||||
console.log('First element animated');
|
||||
}, 500);
|
||||
}
|
||||
// Show first element immediately
|
||||
if (fadeElements[0]) {
|
||||
setTimeout(() => {
|
||||
fadeElements[0].classList.add('visible');
|
||||
console.log('First element animated');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Setup intersection observer for other elements
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
console.log('Element animated on scroll');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
// Setup intersection observer for other elements
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
console.log('Element animated on scroll');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
// Observe all elements except the first one
|
||||
for (let i = 1; i < fadeElements.length; i++) {
|
||||
observer.observe(fadeElements[i]);
|
||||
}
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
fadeElements.forEach(el => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
});
|
||||
// Observe all elements except the first one
|
||||
for (let i = 1; i < fadeElements.length; i++) {
|
||||
observer.observe(fadeElements[i]);
|
||||
}
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
fadeElements.forEach(el => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
});
|
||||
}
|
||||
|
||||
// Flowbite Accordion Functionality
|
||||
const accordionButtons = document.querySelectorAll('[data-accordion-target]');
|
||||
// Flowbite Accordion Functionality
|
||||
const accordionButtons = document.querySelectorAll('[data-accordion-target]');
|
||||
|
||||
accordionButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const targetId = this.getAttribute('data-accordion-target');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
const icon = this.querySelector('[data-accordion-icon]');
|
||||
accordionButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const targetId = this.getAttribute('data-accordion-target');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
const icon = this.querySelector('[data-accordion-icon]');
|
||||
|
||||
// Close all other accordion items
|
||||
accordionButtons.forEach(otherButton => {
|
||||
if (otherButton !== button) {
|
||||
const otherId = otherButton.getAttribute('data-accordion-target');
|
||||
const otherElement = document.querySelector(otherId);
|
||||
const otherIcon = otherButton.querySelector('[data-accordion-icon]');
|
||||
// Close all other accordion items
|
||||
accordionButtons.forEach(otherButton => {
|
||||
if (otherButton !== button) {
|
||||
const otherId = otherButton.getAttribute('data-accordion-target');
|
||||
const otherElement = document.querySelector(otherId);
|
||||
const otherIcon = otherButton.querySelector('[data-accordion-icon]');
|
||||
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
if (otherElement) {
|
||||
otherElement.classList.add('hidden');
|
||||
}
|
||||
if (otherIcon) {
|
||||
otherIcon.classList.remove('rotate-180');
|
||||
}
|
||||
otherButton.setAttribute('aria-expanded', 'false');
|
||||
if (otherElement) {
|
||||
otherElement.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current accordion item
|
||||
if (isExpanded) {
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
if (targetElement) {
|
||||
targetElement.classList.add('hidden');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.remove('rotate-180');
|
||||
}
|
||||
} else {
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
if (targetElement) {
|
||||
targetElement.classList.remove('hidden');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.add('rotate-180');
|
||||
if (otherIcon) {
|
||||
otherIcon.classList.remove('rotate-180');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current accordion item
|
||||
if (isExpanded) {
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
if (targetElement) {
|
||||
targetElement.classList.add('hidden');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.remove('rotate-180');
|
||||
}
|
||||
} else {
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
if (targetElement) {
|
||||
targetElement.classList.remove('hidden');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.add('rotate-180');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
|
||||
@yield('js')
|
||||
@yield('js')
|
||||
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
@extends('layouts.front')
|
||||
@section('content')
|
||||
|
||||
<section class="relative min-h-[calc(40vh-60px)] flex items-center justify-center fade-in">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-center lg:items-start">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<h1 class="mb-4 font-semibold text-4xl md:text-5xl lg:text-6xl leading-[110%] tracking-[-0.03em]">
|
||||
<span class="text-black/50">Rencana Aksi</span><br/>
|
||||
<span class="text-black">Penurunan Emisi</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex-1 lg:max-w-md">
|
||||
<p class="mb-6 text-[#878C91] text-base leading-relaxed">
|
||||
Data yang Andal adalah fondasi utama untuk verifikasi kepatuhan regulasi dan pembangunan keberlanjutan daerah. Kami menyajikan status dan capaian program mitigasi yang terverifikasi.
|
||||
</p>
|
||||
<a href="#" class="btn-minimal btn-primary rounded-full px-8 py-4 text-white inline-flex items-center gap-3">
|
||||
<span>Akses Dokumen RAD GRK</span>
|
||||
<i class="bx bx-right-arrow-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<img class="w-full h-64 md:h-80 rounded-2xl object-cover shadow-lg" src="{{ asset('assets/images/header-image.png') }}" alt="Rencana Aksi Penurunan Emisi" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative mx-auto container px-4 sm:px-6 lg:px-8 py-12 fade-in">
|
||||
<div class="py-12">
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
|
||||
<span class="text-black/50">Mewujudkan Jakarta Nol Emisi:</span>
|
||||
<span class="text-black"> Strategi dan Implementasi</span>
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-[#878C91] text-base leading-7 w-full text-justify">
|
||||
Upaya ambisius DKI Jakarta dalam mitigasi perubahan iklim diwujudkan melalui Rencana Aksi Daerah (RAD) Gas Rumah Kaca. Dokumen ini memetakan program spesifik di seluruh sektor untuk mencapai target penurunan emisi yang ditetapkan, didukung oleh data inventarisasi yang transparan dari SIGRD.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-12">
|
||||
<!-- Sektor Energi -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<h3 class="text-2xl md:text-3xl font-medium">
|
||||
<span class="text-black/50">Sektor</span>
|
||||
<span class="text-black"> Energi</span>
|
||||
</h3>
|
||||
<p class="text-[#878C91] text-base leading-relaxed">
|
||||
Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.
|
||||
</p>
|
||||
<div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
|
||||
<img class="w-full h-full object-cover"src="{{ asset('assets/images/sektor-energi.png') }}" alt="Sektor Energi" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektor Limbah -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<h3 class="text-2xl md:text-3xl font-medium">
|
||||
<span class="text-black/50">Sektor</span>
|
||||
<span class="text-black"> Limbah</span>
|
||||
</h3>
|
||||
<p class="text-[#878C91] text-base leading-relaxed">
|
||||
Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.
|
||||
</p>
|
||||
<div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
|
||||
<img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-limbah.png') }}" alt="Sektor Limbah" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektor Transportasi -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<h3 class="text-2xl md:text-3xl font-medium">
|
||||
<span class="text-black/50">Sektor</span>
|
||||
<span class="text-black"> Transportasi</span>
|
||||
</h3>
|
||||
<p class="text-[#878C91] text-base leading-relaxed">
|
||||
Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.
|
||||
</p>
|
||||
<div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
|
||||
<img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-transportasi.png') }}" alt="Sektor Transportasi" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektor IPPU -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<h3 class="text-2xl md:text-3xl font-medium">
|
||||
<span class="text-black/50">Sektor</span>
|
||||
<span class="text-black"> IPPU</span>
|
||||
</h3>
|
||||
<p class="text-[#878C91] text-base leading-relaxed">
|
||||
Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.
|
||||
</p>
|
||||
<div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
|
||||
<img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-ippu.png') }}" alt="Sektor IPPU" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-8 mt-16 px-4 md:px-6">
|
||||
<div class="text-center lg:text-left">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
|
||||
<span class="text-black/50">Merancang dan Mengukur</span><br/>
|
||||
<span class="text-black">Aksi Mitigasi Berbasis Data</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-[#878C91] text-base leading-relaxed w-full">
|
||||
<p class="mb-8 text-justify leading-7 w-full">
|
||||
Rencana Aksi Daerah (RAD) GRK DKI Jakarta dimulai dengan penetapan Baseline Emisi (Tahun Dasar) dan proyeksi skenario Business as Usual (BAU). Perencanaan aksi ini adalah hasil kolaborasi multi-SKPD, memastikan target penurunan emisi yang ambisius namun realistis. Kami mengidentifikasi potensi mitigasi tertinggi di sektor Energi (terutama Transportasi) dan Limbah sebagai fokus utama, sesuai dengan analisis data inventarisasi SIGRD.
|
||||
</p>
|
||||
<p class="text-justify leading-7 w-full">
|
||||
Setiap program aksi wajib menggunakan metodologi Verifikasi dan Validasi (V&V) untuk menghitung Potensi Penurunan Emisi (PPE) yang dapat dicapai. Perhitungan ini dilakukan dengan membandingkan emisi aktual setelah aksi dengan skenario BAU. Dengan demikian, SIGRD tidak hanya mencatat daftar program, tetapi juga secara berkelanjutan mengevaluasi efektivitas setiap kebijakan dalam mendukung pencapaian target nol emisi DKI Jakarta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-[#efefef] py-20 fade-in">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start mb-12">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
|
||||
Status Program Mitigasi Sektoral
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[#878C91] text-base leading-relaxed">
|
||||
Pelacakan kinerja program mitigasi yang dilaksanakan oleh SKPD terkait di seluruh sektor. Lihat Potensi Penurunan Emisi (PPE) dan status implementasi terkini.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Sektor Energi & Transportasi -->
|
||||
<div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-4 h-4 bg-sky-400 rounded-full"></div>
|
||||
</div>
|
||||
<h3 class="text-xl md:text-2xl font-semibold text-black">
|
||||
Sektor Energi & Transportasi
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-end justify-between gap-4 mt-6">
|
||||
<p class="text-[#878C91] text-sm leading-relaxed flex-1">
|
||||
Program efisiensi energi, transisi kendaraan listrik, dan pengembangan transportasi publik rendah emisi.
|
||||
</p>
|
||||
<a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
|
||||
<i class="bx bx-right-arrow-alt text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektor Limbah -->
|
||||
<div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
|
||||
</div>
|
||||
<h3 class="text-xl md:text-2xl font-semibold text-black">
|
||||
Sektor Limbah
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-end justify-between gap-4 mt-6">
|
||||
<p class="text-[#878C91] text-sm leading-relaxed flex-1">
|
||||
Optimalisasi TPA, pembangunan PSEL, dan pengelolaan air limbah untuk mengurangi emisi.
|
||||
</p>
|
||||
<a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
|
||||
<i class="bx bx-right-arrow-alt text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sektor AFOLU & IPPU -->
|
||||
<div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="w-4 h-4 bg-violet-700 rounded-full"></div>
|
||||
</div>
|
||||
<h3 class="text-xl md:text-2xl font-semibold text-black">
|
||||
Sektor AFOLU & IPPU
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-end justify-between gap-4 mt-6">
|
||||
<p class="text-[#878C91] text-sm leading-relaxed flex-1">
|
||||
Konservasi lahan hijau, rehabilitasi mangrove, dan pemantauan F-Gas industri.
|
||||
</p>
|
||||
<a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
|
||||
<i class="bx bx-right-arrow-alt text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -7,6 +7,7 @@ use App\Http\Controllers\Auth\CustomLoginController;
|
|||
use App\Http\Controllers\Auth\CustomRegisterController;
|
||||
|
||||
Route::get('/',[FrontController::class,'index'])->name('index');
|
||||
Route::get('/rencana-aksi',[FrontController::class,'rencanaAksi'])->name('rencana-aksi');
|
||||
Route::get('forgotpass',[CustomLoginController::class,'forgotpass'])->name('forgotpass');
|
||||
Route::post('forgotpass',[CustomLoginController::class,'forgotpass_post'])->name('forgotpass_post');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue