358 lines
16 KiB
PHP
358 lines
16 KiB
PHP
@extends('user.template')
|
|
|
|
@section('title', 'Beranda')
|
|
|
|
@section('content')
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container text-center d-flex flex-column justify-content-center align-items-center position-relative">
|
|
<h1>Selamat Datang di <span>SIG TPS</span></h1>
|
|
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
|
<div class="d-flex">
|
|
<a href="{{ route('user.sig-tps') }}" class="btn-get-started scrollto">Lihat Peta</a>
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Featured Services Section -->
|
|
<section id="featured-services" class="featured-services section">
|
|
<div class="container">
|
|
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Sampah</h2>
|
|
<p>Total sampah yang terkumpul di seluruh wilayah Kabupaten Nganjuk pada tahun
|
|
{{ $sampah->tahun ?? 'Tahun Tidak Tersedia' }}</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="row gy-4">
|
|
|
|
<!-- Total Timbulan Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-trash2 icon"></i>
|
|
</div>
|
|
<h2>
|
|
{{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
|
|
</h2>
|
|
<p>Total Timbulan Sampah (ton)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sampah Dikelola -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-gear icon"></i>
|
|
</div>
|
|
<h2>
|
|
{{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
|
|
</h2>
|
|
<p>Total Sampah Dikelola (ton)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sampah Didaur Ulang -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-recycle icon"></i>
|
|
</div>
|
|
<h2>
|
|
{{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
|
|
</h2>
|
|
<p>Total Sampah Didaur Ulang (ton)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Sisa Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="text-center service-item position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-exclamation-triangle icon"></i>
|
|
</div>
|
|
<h2>
|
|
{{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
|
|
</h2>
|
|
<p>Total Sisa Sampah (ton)</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /Featured Services Section -->
|
|
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Tentang</h2>
|
|
<p>Sistem Informasi Geografis yang menampilkan data lokasi secara visual dan interaktif.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
<div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="col-lg-5">
|
|
<div class="about-img">
|
|
<img src="{{ asset('assets/user/img/tentang-lg.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-7">
|
|
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="about-tab1">
|
|
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
|
|
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Peta Interaktif Lokasi TPS</h4>
|
|
</div>
|
|
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
|
|
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Informasi TPS Lengkap</h4>
|
|
</div>
|
|
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
|
|
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Layanan Aduan TPS</h4>
|
|
</div>
|
|
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
|
|
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /About Section -->
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-5">
|
|
|
|
@foreach ($kategoriTps as $index => $item)
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ 200 + $index * 100 }}">
|
|
|
|
<div class="service-item">
|
|
<div class="img">
|
|
@if ($item->foto_kategori && file_exists(public_path('assets/admin/images/kategori-tps/' . $item->foto_kategori)))
|
|
<img src="{{ asset('assets/admin/images/kategori-tps/' . $item->foto_kategori) }}"
|
|
class="img-fluid" alt="{{ $item->nama_kategori }}">
|
|
@else
|
|
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid"
|
|
alt="Default">
|
|
@endif
|
|
</div>
|
|
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
@if ($item->nama_kategori == 'TPS')
|
|
<i class="bi bi-trash"></i>
|
|
@elseif ($item->nama_kategori == 'TPS 3R')
|
|
<i class="bi bi-recycle"></i>
|
|
@elseif ($item->nama_kategori == 'TPA')
|
|
<i class="bi bi-geo-alt"></i>
|
|
@else
|
|
<i class="bi bi-archive"></i>
|
|
@endif
|
|
</div>
|
|
|
|
<a href="#" class="stretched-link">
|
|
<h3>{{ $item->kepanjangan_kategori }}</h3>
|
|
</a>
|
|
|
|
<p>
|
|
{{ explode('.', $item->deskripsi)[0] }}.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="geo-stat-section">
|
|
<div class="geo-bg"></div>
|
|
|
|
<div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row align-items-center">
|
|
|
|
<!-- KIRI -->
|
|
<div class="mb-4 col-lg-5 mb-lg-0">
|
|
<span class="geo-badge">Statistik SIG TPS</span>
|
|
<h2 class="geo-title">
|
|
Pemetaan & Pengelolaan<br>
|
|
Sampah Kabupaten Nganjuk
|
|
</h2>
|
|
<p class="geo-desc">
|
|
Menampilkan jumlah fasilitas persampahan berbasis
|
|
Sistem Informasi Geografis secara terintegrasi.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- KANAN -->
|
|
<div class="col-lg-7">
|
|
<div class="geo-stats">
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon">
|
|
<i class="bi bi-trash"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTps }}">0</h3>
|
|
<span>TPS</span>
|
|
</div>
|
|
|
|
<div class="geo-line"></div>
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon recycle">
|
|
<i class="bi bi-recycle"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTps3r }}">0</h3>
|
|
<span>TPS 3R</span>
|
|
</div>
|
|
|
|
<div class="geo-line"></div>
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon location">
|
|
<i class="bi bi-geo-alt"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTpa }}">0</h3>
|
|
<span>TPA</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" class="faq section">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row gy-4 justify-content-center">
|
|
|
|
<div class="order-2 col-lg-7 d-flex flex-column justify-content-center order-lg-1">
|
|
|
|
<div class="text-center content px-xl-6" data-aos="fade-up" data-aos-delay="100">
|
|
<h3><span>Pertanyaan yang Sering </span><strong>Diajukan</strong></h3>
|
|
<p>
|
|
Berikut adalah beberapa pertanyaan yang sering diajukan oleh pengguna terkait
|
|
informasi, fitur, dan layanan pada website.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="faq-container px-xl-5" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<!-- FAQ 1 -->
|
|
<div class="faq-item faq-active">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Apa tujuan utama website ini?</h3>
|
|
<div class="faq-content">
|
|
<p>
|
|
Website ini bertujuan untuk menyediakan informasi yang akurat dan mudah diakses
|
|
oleh masyarakat mengenai lokasi dan data Tempat Pembuangan Sampah (TPS). Dengan adanya
|
|
website ini, diharapkan masyarakat dapat lebih memahami kondisi
|
|
TPS serta mendukung pengelolaan lingkungan yang lebih baik.
|
|
</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
<!-- FAQ 2 -->
|
|
<div class="faq-item">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Bagaimana cara melihat peta sebaran TPS?</h3>
|
|
<div class="faq-content">
|
|
<p>
|
|
Peta sebaran TPS dapat dilihat melalui menu Sebaran TPS yang tersedia pada halaman utama
|
|
website. Peta tersebut bersifat interaktif dan menampilkan lokasi TPS berdasarkan
|
|
wilayah. Pengguna dapat mengklik setiap penanda lokasi untuk melihat detail informasi
|
|
seperti alamat TPS dan keterangan tambahan lainnya.
|
|
</p>
|
|
{{-- <p>
|
|
|
|
</p> --}}
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
<!-- FAQ 3 -->
|
|
<div class="faq-item">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Bagaimana cara mengadukan permasalahan TPS?</h3>
|
|
<div class="faq-content">
|
|
<p>
|
|
Pengaduan permasalahan TPS dapat dilakukan melalui menu Aduan TPS yang tersedia
|
|
pada website dengan mengisi formulir yang telah disediakan. Laporan yang masuk akan
|
|
diteruskan kepada pihak terkait untuk ditindaklanjuti
|
|
guna meningkatkan kualitas pengelolaan TPS.
|
|
</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
<!-- FAQ 4 -->
|
|
<div class="faq-item">
|
|
<i class="faq-icon bi bi-question-circle"></i>
|
|
<h3>Apakah website ini dapat diakses melalui perangkat mobile?</h3>
|
|
<div class="faq-content">
|
|
<p>
|
|
Ya, website ini dirancang secara responsif sehingga dapat diakses melalui
|
|
berbagai perangkat, termasuk smartphone dan tablet. Tampilan website akan menyesuaikan
|
|
ukuran layar perangkat pengguna tanpa
|
|
mengurangi fungsi dan informasi yang tersedia.
|
|
</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div><!-- End Faq item-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".counter").forEach(el => {
|
|
const target = +el.dataset.target;
|
|
let val = 0;
|
|
|
|
const step = () => {
|
|
val += Math.ceil(target / 90);
|
|
if (val < target) {
|
|
el.textContent = val;
|
|
requestAnimationFrame(step);
|
|
} else {
|
|
el.textContent = target;
|
|
}
|
|
};
|
|
step();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</section>
|
|
@endsection
|