362 lines
14 KiB
PHP
362 lines
14 KiB
PHP
@extends('user.template')
|
|
|
|
@section('content')
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container d-flex flex-column justify-content-center align-items-center text-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="#about" class="btn-get-started scrollto">Lihat Peta</a>
|
|
<!-- <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<!-- Featured Services Section -->
|
|
<section id="featured-services" class="featured-services section">
|
|
<div class="container">
|
|
|
|
<!-- Section Title -->
|
|
<div class="section-title text-center" data-aos="fade-up">
|
|
<h2>Timbulan Sampah</h2>
|
|
<p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per hari</strong>.</p>
|
|
</div>
|
|
|
|
<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="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-trash2 icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>23,893.07</h1>
|
|
<p><strong>Total Timbulan Sampah</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sampah Dikelola -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-gear icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>7,479.65</h1>
|
|
<p><strong>Total Sampah Dikelola</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sampah Didaur Ulang -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-recycle icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>2,780.05</h1>
|
|
<p><strong>Total Sampah Didaur Ulang</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<!-- Total Sisa Sampah -->
|
|
<div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="service-item position-relative">
|
|
<div class="icon"><i class="bi bi-exclamation-triangle icon"></i></div>
|
|
<h1><a href="#" class="stretched-link"></a>13,633.35</h1>
|
|
<p><strong>Total Sisa Sampah</strong></p>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
</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/about-portrait.jpg') }}" 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>
|
|
|
|
<!-- Tab Content -->
|
|
<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="d-flex align-items-center mt-4">
|
|
<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="d-flex align-items-center mt-4">
|
|
<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="d-flex align-items-center mt-4">
|
|
<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><!-- End Tab 1 Content -->
|
|
</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">
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-activity"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pembuangan Sampah</h3>
|
|
</a>
|
|
<p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-2.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-broadcast"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pengolahan Sampah Reduce, Reuse, Recycle</h3>
|
|
</a>
|
|
<p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="400">
|
|
<div class="service-item">
|
|
<div class="img">
|
|
<img src="{{ asset('assets/user/img/services-3.jpg') }}" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="details position-relative">
|
|
<div class="icon">
|
|
<i class="bi bi-easel"></i>
|
|
</div>
|
|
<a href="service-details.html" class="stretched-link">
|
|
<h3>Tempat Pembuangan Akhir</h3>
|
|
</a>
|
|
<p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End Service Item -->
|
|
</div>
|
|
</div>
|
|
</section><!-- /Services Section -->
|
|
|
|
<!-- Call To Action Section -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
/* Hilangkan padding section */
|
|
#call-to-action.call-to-action {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Container dibuat flex agar map bisa center */
|
|
#call-to-action .container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* Wrapper card map modern */
|
|
.map-wrapper {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
/* agar map di tengah */
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Map full card */
|
|
#mapTPS {
|
|
width: 100%;
|
|
height: 450px;
|
|
}
|
|
|
|
/* Zoom Button Modern */
|
|
.leaflet-control-zoom {
|
|
border-radius: 10px !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Popup Modern */
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 14px !important;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|
|
|
|
<section id="call-to-action" class="call-to-action section">
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="map-wrapper">
|
|
<div id="mapTPS"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: "Leaflet | © OpenStreetMap contributors",
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
var tpsData = [{
|
|
name: "TPS 1 Berbek",
|
|
lat: -7.5978,
|
|
lng: 111.917
|
|
},
|
|
{
|
|
name: "TPS 2 Loceret",
|
|
lat: -7.6280,
|
|
lng: 111.910
|
|
},
|
|
{
|
|
name: "TPS 3 Nganjuk Kota",
|
|
lat: -7.6140,
|
|
lng: 111.900
|
|
}
|
|
];
|
|
|
|
tpsData.forEach(tps => {
|
|
L.marker([tps.lat, tps.lng])
|
|
.addTo(map)
|
|
.bindPopup(`<b style='font-size:16px;'>${tps.name}</b>`);
|
|
});
|
|
</script>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Contact</h2>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade">
|
|
|
|
<div class="row gy-5 gx-lg-5">
|
|
|
|
<div class="col-lg-4">
|
|
|
|
<div class="info">
|
|
<h3>Get in touch</h3>
|
|
<p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi minus.</p>
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Location:</h4>
|
|
<p>A108 Adam Street, New York, NY 535022</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-envelope flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Email:</h4>
|
|
<p>info@example.com</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
<div class="info-item d-flex">
|
|
<i class="bi bi-phone flex-shrink-0"></i>
|
|
<div>
|
|
<h4>Call:</h4>
|
|
<p>+1 5589 55488 55</p>
|
|
</div>
|
|
</div><!-- End Info Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-8">
|
|
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
|
<div class="row">
|
|
<div class="col-md-6 form-group">
|
|
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required="">
|
|
</div>
|
|
<div class="col-md-6 form-group mt-3 mt-md-0">
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required="">
|
|
</div>
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required="">
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
|
</div>
|
|
<div class="my-3">
|
|
<div class="loading">Loading</div>
|
|
<div class="error-message"></div>
|
|
<div class="sent-message">Your message has been sent. Thank you!</div>
|
|
</div>
|
|
<div class="text-center"><button type="submit">Send Message</button></div>
|
|
</form>
|
|
</div><!-- End Contact Form -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
@endsection
|