493 lines
21 KiB
PHP
493 lines
21 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>
|
|
|
|
<!-- Tabs -->
|
|
<!-- <ul class="nav nav-pills mb-3">
|
|
<li><a class="nav-link active" data-bs-toggle="pill" href="#about-tab1">Saepe fuga</a></li>
|
|
<li><a class="nav-link" data-bs-toggle="pill" href="#about-tab2">Voluptates</a></li>
|
|
<li><a class="nav-link" data-bs-toggle="pill" href="#about-tab3">Corrupti</a></li>
|
|
</ul> -->
|
|
<!-- End Tabs -->
|
|
|
|
<!-- 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 class="tab-pane fade" id="about-tab2">
|
|
|
|
<p class="fst-italic">Consequuntur inventore voluptates consequatur aut vel et. Eos doloribus expedita. Sapiente atque consequatur minima nihil quae aspernatur quo suscipit voluptatem.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Repudiandae rerum velit modi et officia quasi facilis</h4>
|
|
</div>
|
|
<p>Laborum omnis voluptates voluptas qui sit aliquam blanditiis. Sapiente minima commodi dolorum non eveniet magni quaerat nemo et.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Incidunt non veritatis illum ea ut nisi</h4>
|
|
</div>
|
|
<p>Non quod totam minus repellendus autem sint velit. Rerum debitis facere soluta tenetur. Iure molestiae assumenda sunt qui inventore eligendi voluptates nisi at. Dolorem quo tempora. Quia et perferendis.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Omnis ab quia nemo dignissimos rem eum quos..</h4>
|
|
</div>
|
|
<p>Eius alias aut cupiditate. Dolor voluptates animi ut blanditiis quos nam. Magnam officia aut ut alias quo explicabo ullam esse. Sunt magnam et dolorem eaque magnam odit enim quaerat. Vero error error voluptatem eum.</p>
|
|
|
|
</div> -->
|
|
<!-- End Tab 2 Content -->
|
|
|
|
<!-- <div class="tab-pane fade" id="about-tab3">
|
|
|
|
<p class="fst-italic">Consequuntur inventore voluptates consequatur aut vel et. Eos doloribus expedita. Sapiente atque consequatur minima nihil quae aspernatur quo suscipit voluptatem.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Repudiandae rerum velit modi et officia quasi facilis</h4>
|
|
</div>
|
|
<p>Laborum omnis voluptates voluptas qui sit aliquam blanditiis. Sapiente minima commodi dolorum non eveniet magni quaerat nemo et.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Incidunt non veritatis illum ea ut nisi</h4>
|
|
</div>
|
|
<p>Non quod totam minus repellendus autem sint velit. Rerum debitis facere soluta tenetur. Iure molestiae assumenda sunt qui inventore eligendi voluptates nisi at. Dolorem quo tempora. Quia et perferendis.</p>
|
|
|
|
<div class="d-flex align-items-center mt-4">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Omnis ab quia nemo dignissimos rem eum quos..</h4>
|
|
</div>
|
|
<p>Eius alias aut cupiditate. Dolor voluptates animi ut blanditiis quos nam. Magnam officia aut ut alias quo explicabo ullam esse. Sunt magnam et dolorem eaque magnam odit enim quaerat. Vero error error voluptatem eum.</p>
|
|
|
|
</div> -->
|
|
<!-- End Tab 3 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 -->
|
|
|
|
<!-- Clients Section -->
|
|
<!-- <section id="clients" class="clients section">
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
|
|
<div class="row gy-4">
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-1.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-2.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-3.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-4.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-5.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-xl-2 col-md-3 col-6 client-logo">
|
|
<img src="{{ asset('assets/user/img/clients/client-6.png') }}" class="img-fluid" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> -->
|
|
<!-- /Clients 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>
|
|
|
|
|
|
<!-- /Call To Action Section -->
|
|
|
|
<!-- Onfocus Section -->
|
|
<!-- <section id="onfocus" class="onfocus section dark-background">
|
|
|
|
<div class="container-fluid p-0" data-aos="fade-up">
|
|
|
|
<div class="row g-0">
|
|
<div class="col-lg-6 video-play position-relative">
|
|
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox pulsating-play-btn"></a>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="content d-flex flex-column justify-content-center h-100">
|
|
<h3>Voluptatem dignissimos provident quasi corporis</h3>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
|
<li><i class="bi bi-check-circle"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
|
|
<li><i class="bi bi-check-circle"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
|
|
</ul>
|
|
<a href="#" class="read-more align-self-start"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> -->
|
|
<!-- /Onfocus Section -->
|
|
|
|
<!-- 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
|