landing page from database
This commit is contained in:
parent
b57c92f3c7
commit
2be275b1fb
|
|
@ -27,6 +27,7 @@ public function store(Request $request)
|
|||
{
|
||||
$data = $request->validate([
|
||||
'nama_kategori' => 'required|string|max:100',
|
||||
'kepanjangan_kategori' => 'nullable|string|max:255',
|
||||
'deskripsi' => 'nullable|string',
|
||||
'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048'
|
||||
]);
|
||||
|
|
@ -57,6 +58,7 @@ public function update(Request $request, $id)
|
|||
|
||||
$data = $request->validate([
|
||||
'nama_kategori' => 'required|string|max:100',
|
||||
'kepanjangan_kategori' => 'nullable|string|max:255',
|
||||
'deskripsi' => 'nullable|string',
|
||||
'foto_kategori' => 'nullable|image|mimes:jpg,jpeg,png|max:2048'
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Sampah;
|
||||
use App\Models\KategoriTps;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class IndexController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
$title = 'User Home';
|
||||
return view('user.index', compact('title'));
|
||||
$sampah = Sampah::orderBy('tahun', 'desc')->first();
|
||||
$kategoriTps = KategoriTps::orderBy('id_kategori_tps')->get();
|
||||
|
||||
return view('user.index', compact('sampah', 'kategoriTps'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ class KategoriTps extends Model
|
|||
|
||||
protected $fillable = [
|
||||
'nama_kategori',
|
||||
'kepanjangan_kategori',
|
||||
'deskripsi',
|
||||
'foto_kategori'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('kategori_tps', function (Blueprint $table) {
|
||||
$table->string('kepanjangan_kategori', 255)
|
||||
->after('nama_kategori')
|
||||
->nullable();
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('kategori_tps', function (Blueprint $table) {
|
||||
$table->dropColumn('kepanjangan_kategori');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -17,6 +17,11 @@
|
|||
<input type="text" name="nama_kategori" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Kepanjangan Kategori</label>
|
||||
<input type="text" name="kepanjangan_kategori" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleTextarea1">Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control" id="exampleTextarea1" rows="4"></textarea>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@
|
|||
class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Kepanjangan Kategori</label>
|
||||
<input type="text" name="kepanjangan_kategori" value="{{ $kategori->kepanjangan_kategori }}"
|
||||
class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control">{{ $kategori->deskripsi }}</textarea>
|
||||
|
|
|
|||
|
|
@ -1,361 +1,376 @@
|
|||
@extends('user.template')
|
||||
|
||||
@section('content')
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="hero section">
|
||||
|
||||
<!-- 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 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>
|
||||
</div>
|
||||
|
||||
</section><!-- /Hero Section -->
|
||||
</section><!-- /Hero Section -->
|
||||
|
||||
<!-- Featured Services Section -->
|
||||
<section id="featured-services" class="featured-services section">
|
||||
<div class="container">
|
||||
<!-- 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 text-center">
|
||||
<div class="icon">
|
||||
<i class="bi bi-trash2 icon"></i>
|
||||
</div>
|
||||
<h1>
|
||||
{{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
|
||||
</h1>
|
||||
<p><strong>Total Timbulan Sampah</strong></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="service-item position-relative text-center">
|
||||
<div class="icon">
|
||||
<i class="bi bi-gear icon"></i>
|
||||
</div>
|
||||
<h1>
|
||||
{{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
|
||||
</h1>
|
||||
<p><strong>Total Sampah Dikelola</strong></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="service-item position-relative text-center">
|
||||
<div class="icon">
|
||||
<i class="bi bi-recycle icon"></i>
|
||||
</div>
|
||||
<h1>
|
||||
{{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
|
||||
</h1>
|
||||
<p><strong>Total Sampah Didaur Ulang</strong></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="service-item position-relative text-center">
|
||||
<div class="icon">
|
||||
<i class="bi bi-exclamation-triangle icon"></i>
|
||||
</div>
|
||||
<h1>
|
||||
{{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
|
||||
</h1>
|
||||
<p><strong>Total Sisa Sampah</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- /Featured Services Section -->
|
||||
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about section">
|
||||
|
||||
<!-- 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="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="row gy-4">
|
||||
<div class="container" data-aos="fade-up">
|
||||
|
||||
<!-- 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 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><!-- 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 -->
|
||||
<div class="col-lg-7">
|
||||
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
|
||||
|
||||
<!-- 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 -->
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- 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 class="tab-pane fade show active" id="about-tab1">
|
||||
|
||||
</div>
|
||||
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
|
||||
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- /Featured Services Section -->
|
||||
<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>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about section">
|
||||
<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>
|
||||
|
||||
<!-- 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><!-- End Tab 1 Content -->
|
||||
</div>
|
||||
|
||||
<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 -->
|
||||
|
||||
</section><!-- /About Section -->
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="services section">
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="services section">
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="row gy-5">
|
||||
|
||||
<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="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 class="service-item">
|
||||
<div class="img">
|
||||
@if ($item->foto_kategori)
|
||||
<img src="{{ asset('storage/' . $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>
|
||||
{{ $item->deskripsi }}
|
||||
</p>
|
||||
</div>
|
||||
</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 -->
|
||||
@endforeach
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section><!-- /Services Section -->
|
||||
</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>
|
||||
<!-- 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
|
||||
<style>
|
||||
/* Hilangkan padding section */
|
||||
#call-to-action.call-to-action {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
];
|
||||
|
||||
tpsData.forEach(tps => {
|
||||
L.marker([tps.lat, tps.lng])
|
||||
.addTo(map)
|
||||
.bindPopup(`<b style='font-size:16px;'>${tps.name}</b>`);
|
||||
});
|
||||
</script>
|
||||
/* Container dibuat flex agar map bisa center */
|
||||
#call-to-action .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="contact section">
|
||||
/* 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);
|
||||
}
|
||||
|
||||
<!-- 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 -->
|
||||
/* Map full card */
|
||||
#mapTPS {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
<div class="container" data-aos="fade">
|
||||
/* 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;
|
||||
}
|
||||
|
||||
<div class="row gy-5 gx-lg-5">
|
||||
/* Popup Modern */
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<section id="call-to-action" class="call-to-action section">
|
||||
<div class="container" data-aos="fade-up">
|
||||
|
||||
<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="map-wrapper">
|
||||
<div id="mapTPS"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<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 -->
|
||||
<script>
|
||||
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
||||
|
||||
<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 -->
|
||||
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>
|
||||
<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 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>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue