844 lines
45 KiB
Plaintext
844 lines
45 KiB
Plaintext
@section styles {
|
||
<link rel="stylesheet" href="/css/landing-page.css">
|
||
}
|
||
|
||
<div class="container mt-3 mt-md-4">
|
||
<div class="row">
|
||
<div class="col-12 col-md-7">
|
||
<h2 class="mb-2 fw-bold">Berita Terkini</h2>
|
||
<div id="berita-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation"
|
||
data-appear-animation="fadeInUpShorter" data-appear-animation-delay=0 data-plugin-options=""></div>
|
||
</div>
|
||
<div class="col-12 col-md-5">
|
||
<h2 class="mb-2 fs-4 fw-bold">Kualitas Udara Jakarta Hari Ini</h2>
|
||
<div id="ispu"></div>
|
||
<div id="ispu-container" class="row align-items-stretch text-center mx-1 mx-md-0 rounded-4 appear-animation"
|
||
data-appear-animation="fadeInUpShorter" data-appear-animation-delay=200 style="min-height: 70px">
|
||
<div class="col-2 position-relative d-flex align-items-center justify-content-center fs-1"
|
||
style="border-radius: 1rem 0 0 1rem">
|
||
<span id="ispu-icons"></span>
|
||
<a href="#" class="position-absolute text-light" data-bs-toggle="modal"
|
||
data-bs-target="#exampleModal" style="bottom: 0px; right: 8px; font-size: .7rem"><i
|
||
class="fa-solid fa-circle-info"></i></a>
|
||
</div>
|
||
<div class="col-7 col-md-7 d-flex align-items-center justify-content-center flex-column fw-bold text-capitalize py-2 pb-3"
|
||
style="line-height: 1.8rem; font-size: 1.2rem">
|
||
<span id="ispu-status"></span>
|
||
<div style="font-size: .8rem;"
|
||
class="bg-white px-2 py-1 rounded-2 fw-semibold d-flex align-items-center mt-1">
|
||
<i class="fa-solid fa-location-dot"></i>
|
||
<select class="bg-transparent fw-semibold border-0" style="font-size: .7rem;" name="lokasi"
|
||
id="lokasi">
|
||
<option>Data tidak ditemukan</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-3 col-md-3 position-relative d-flex flex-column align-items-center justify-content-center line-height-3"
|
||
style="border-radius: 0 1rem 1rem 0">
|
||
<span id="ispu-value" class="fw-semibold" style="font-size: 1.5rem;"></span>
|
||
<span class="fw-bolder" style="font-size: .55rem;">PM2.5 | 33.8 µg/m³</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between">
|
||
<p class="fw-semibold text-muted" style="font-size: .75rem;">Diperbarui: <span
|
||
id="time-ispu-update"></span> 08-12-2023 13.00</p>
|
||
<a href="https://silika.jakarta.go.id/udara/ispu24" class="fw-semibold text-decoration-underline"
|
||
target="_blank" style="font-size: .75rem;">Lihat Detail</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center flex-wrap gap-2 mt-2 d-none" style="font-size: 1rem;">
|
||
<span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(1)">Lb. Buaya</span>
|
||
<span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(2)">Klp. Gading</span>
|
||
<span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(3)">Kb. Jeruk</span>
|
||
<span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(4)">Bundaran HI</span>
|
||
<span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(5)">Jagakarsa</span>
|
||
</div>
|
||
|
||
<div class="row mb-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=300>
|
||
<div class="col-12">
|
||
<a href="https://jakartasatu.jakarta.go.id/portal/apps/sites/#/dinas-lingkungan-hidup"
|
||
class="text-decoration-none" target="_blank">
|
||
<div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
|
||
style="background: #8ACDD7; min-height: 70px">
|
||
Cek Lokasi Bank Sampah
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=600>
|
||
<div class="col-12">
|
||
<a href="https://silika.jakarta.go.id/tps_neraca" class="text-decoration-none" target="_blank">
|
||
<div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
|
||
style="background: #FF8F8F; min-height: 70px">
|
||
Cek Lokasi TPS
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=900>
|
||
<div class="col-12">
|
||
<a href="https://silika.jakarta.go.id/lps" class="text-decoration-none" target="_blank">
|
||
<div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
|
||
style="background: #9ADE7B; min-height: 70px">
|
||
Cek Lokasi Emplasemen Sampah Badan Air
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="container my-5">
|
||
<div class="row">
|
||
<h2 class="font-weight-bold text-center text-10 pt-3 mb-5">Berita</h2>
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=0>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1080?health"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
<div class="badges position-absolute" style="top: 4px; right:10px">
|
||
<span class="badge" style="background-color: red">Health</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Tegakkan Hukum Uji Emisi, Polda Metro Ambil Tindakan
|
||
Edukatif-Represif</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3 mb-1">
|
||
Dalam rangka pelaksanaan Operasi Zebra Jaya 2023, Polda Metro Jaya bersama Dinas Lingkungan
|
||
Hidup DKI Jakarta, PT. Astra Intenasional mengadakan uji emisi gratis di area Komplek Gelora
|
||
Bung Karno, Rabu
|
||
</p>
|
||
</div>
|
||
<div class="post-meta">
|
||
<span><i class="far fa-calendar"></i> 20 Des 2023</span>
|
||
<span><i class="far fa-clock"></i> 3 min baca</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=200>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1082?politics"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
<div class="badges position-absolute" style="top: 4px; right:10px">
|
||
<span class="badge" style="background-color: rgb(236, 171, 74)">Politics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Sinergi Tekan Polusi Udara Jakarta Terus
|
||
Dilakukan</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Pemprov DKI Jakarta sedang melaksanakan upaya mitigasi untuk mewujudkan target penurunan emisi
|
||
gas rumah kaca di Wilayah DKI Jakarta.
|
||
</p>
|
||
</div>
|
||
<div class="post-meta">
|
||
<span><i class="far fa-calendar"></i> 20 Des 2023</span>
|
||
<span><i class="far fa-clock"></i> 3 min baca</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=400>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1083?sport" style="object-fit: cover"
|
||
class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
<div class="badges position-absolute" style="top: 4px; right:10px">
|
||
<span class="badge" style="background-color: rgb(66, 180, 146)">Sport</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing
|
||
elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum,
|
||
quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat
|
||
aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus
|
||
natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
|
||
</p>
|
||
<div class="post-meta">
|
||
<span><i class="far fa-calendar"></i> 20 Des 2023</span>
|
||
<span><i class="far fa-clock"></i> 3 min baca</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 d-md-none d-lg-block appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=600>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1084?technology"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
<div class="badges position-absolute" style="top: 4px; right:10px">
|
||
<span class="badge" style="background-color: rgb(0, 119, 255)">Technology</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing
|
||
elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum,
|
||
quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat
|
||
aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus
|
||
natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<h2 class="font-weight-bold text-center text-10 pt-3 mb-5">Layanan Kami</h2>
|
||
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=0>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1089?electronic"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Penjemputan E-Waste</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Layanan Jemput Gratis limbah elektronik untuk warga Jakarta
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=200>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1081?environtment"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">AMDAL</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Analisa Mengenai Dampak Lingkungan
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=400>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1082?chemistry"
|
||
style="object-fit: cover" class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Uji Sample LLHD</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Uji dan Analisis Lingkungan
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-4 col-lg-3 d-md-none d-lg-block appear-animation" data-appear-animation="fadeInUpShorter"
|
||
data-appear-animation-delay=600>
|
||
<article class="post post-medium border-0 pb-0 mb-5">
|
||
<div class="post-image">
|
||
<div class="position-relative">
|
||
<a href="#" class="d-block ratio ratio-16x9 rounded-4">
|
||
<img data-lazy="https://source.unsplash.com/random/700×1087?Bus" style="object-fit: cover"
|
||
class="rounded-4 lazy" alt="" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
||
class="text-break overflow-ellipsis-3">Bus Toilet</a>
|
||
</h2>
|
||
<p class="text-break overflow-ellipsis-3">
|
||
Layanan Peminjaman Bus Toilet
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12 col-md-8">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6">
|
||
<h3 class="mb-2 fw-bold">Pengumuman</h3>
|
||
<div id="pengumuman-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation"
|
||
data-appear-animation="fadeInUpShorter" data-appear-animation-delay=0
|
||
data-plugin-options="{'items': 1, 'loop': true, 'autoHeight': true, 'margin': 10, 'autoplay': true, 'autoplayTimeout': 3000, 'autoplayHoverPause': true}">
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1920/?nature"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1921/?nature"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1922/?nature"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<h3 class="mb-2 fw-bold">Foto</h3>
|
||
<div id="foto-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation"
|
||
data-appear-animation="fadeInUpShorter" data-appear-animation-delay=300
|
||
data-plugin-options="{'items': 1, 'loop': true, 'autoHeight': true, 'margin': 10, 'autoplay': true, 'autoplayTimeout': 3000, 'autoplayHoverPause': true}">
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1924/?sky"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1925/?sky"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/1080×1926/?sky"
|
||
class="img-fluid w-100 h-100 lazy" style="object-fit: cover;" alt="Nature">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="row">
|
||
<div class="col-12 col-md-12">
|
||
<h3 class="mb-2 fw-bold">Social Media</h3>
|
||
<div class="tabs">
|
||
<ul class="nav nav-tabs nav-justified flex-column flex-md-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#instagram-tabs" data-bs-toggle="tab"
|
||
class="text-center">Instagram</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#x-tabs" data-bs-toggle="tab"
|
||
class="text-center">X(Twitter)</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#facebook-tabs" data-bs-toggle="tab"
|
||
class="text-center">Facebook</a>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content">
|
||
<div id="instagram-tabs" class="tab-pane active">
|
||
<div class="d-flex gap-3 mt-3">
|
||
<img src="/img/logos/logo-dlh.png" class="rounded-circle h-100" width="35"
|
||
alt="Logo Instagram">
|
||
<div class="d-flex justify-content-between gap-3">
|
||
<div>
|
||
<div class="d-flex align-items-center gap-3">
|
||
<span class="d-flex align-items-center gap-1">
|
||
<span class="fs-6 text-dark fw-semibold">dinaslhdki</span>
|
||
<img src="/dlh/img/icons/ig-verified.png" width="18" alt="">
|
||
</span>
|
||
<a href="https://www.instagram.com/dinaslhdki" target="_blank"
|
||
class="btn btn-sm btn-info px-3 py-1 border-0 text-dark rounded-2"
|
||
style="font-size: .7rem; background-color: rgb(239, 239, 239);">Follow</a>
|
||
</div>
|
||
<p class="text-dark fw-semibold mt-2 mb-0">Dinas Lingkungan Hidup DKI
|
||
Jakarta</p>
|
||
<span class="text-dark" style="font-size: .8rem">Akun Resmi Dinas Lingkungan
|
||
Hidup Provinsi DKI Jakarta. <br>
|
||
Kontak : <a
|
||
href="mailto:dinaslh@jakarta.go.id">dinaslh@jakarta.go.id</a>
|
||
<a href="https://www.instagram.com/jakartasadarsampah"
|
||
target="_blank">@jakartasadarsampah</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="x-tabs" class="tab-pane">
|
||
<img src="https://pbs.twimg.com/profile_banners/2789007025/1483205548/1080x360" class="w-100" alt="">
|
||
<div class="px-2" style="margin-top: -20px">
|
||
<div class="d-flex align-items-end justify-content-between">
|
||
<img src="/img/logos/logo-dlh.png" class="rounded-circle h-100 bg-white border border-3 border-white" width="50">
|
||
<div class="d-flex">
|
||
<a href="https://twitter.com/dinaslhdki" target="_blank"
|
||
class="btn btn-sm btn-info px-3 py-1 border-0 mb-1 bg-dark text-light rounded-pill"
|
||
style="font-size: .55rem">Follow</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="mt-1 text-dark mb-0 fw-semibold ">Dinas LH DKI Jakarta</p>
|
||
<p class="mb-0 text-muted">@dinaslhdki</p>
|
||
<p class="mb-0 text-dark">Akun Resmi Dinas Lingkungan Hidup Pemerintah Provinsi DKI Jakarta</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="facebook-tabs" class="tab-pane">
|
||
<img src="https://pbs.twimg.com/profile_banners/2789007025/1483205548/1080x360" class="w-100" alt="">
|
||
<div class="px-2" style="margin-top: -10px">
|
||
<div class="d-flex align-items-end justify-content-between">
|
||
<div class="col-9 d-flex align-items-end gap-1">
|
||
<img src="/img/logos/logo-dlh.png" class="rounded-circle h-100 bg-white border border-3 border-white" width="50">
|
||
<div class="d-flex">
|
||
<p class="d-block text-dark fw-bold mb-0" style="font-size: .75rem; line-height: .9rem;">Dinas Lingkungan Hidup DKI Jakarta <span><img src="/dlh/img/icons/fb-verified.png" height="12" width="12" alt=""></span></p>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex">
|
||
<a href="https://www.facebook.com/DinasLingkunganHidupDKIjakarta" target="_blank"
|
||
class="btn btn-sm btn-info px-2 py-1 border-0 mb-1 text-dark rounded-1"
|
||
style="font-size: .55rem; background-color: #E4E6EB;"><i class="fa-solid fa-square-plus"></i> Ikuti</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h2 class="mb-2 fw-bold text-center mt-5 mb-0">Website Terkait</h2>
|
||
<div class="logos">
|
||
<div class="logos-slide">
|
||
<img src="/dlh/img/logo/logo-dlh.png" />
|
||
<img src="/dlh/img/logo/logo-ikhtiar3.png" />
|
||
<img src="/dlh/img/logo/logo-jca2.png" />
|
||
<img src="/dlh/img/logo/logo.png" />
|
||
<img src="/dlh/img/logo/logo_klhk.png" />
|
||
<img src="/dlh/img/logo/logo_upst.jpg" />
|
||
<img src="/dlh/img/logo/logoaja-jsc.png" />
|
||
<img src="/dlh/img/logo/logoujiemisi.png" />
|
||
<img src="/dlh/img/logo/sipepeng1.jpg" />
|
||
<img src="/dlh/img/logo/UPsbadanaer.jpg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Info -->
|
||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content border-0">
|
||
<div class="modal-body">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<td colspan="3"><label><b>Keterangan</b></label></td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_green.png"
|
||
style="width:12px;height:12px"></td>
|
||
<td width="15%">0-50</td>
|
||
<td width="80%" class="bg-green"> Baik</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td>Tingkat kualitas udara yang tidak memberikan efek bagi kesehatan manusia atau hewan
|
||
dan
|
||
tidak berpengaruh pada tumbuhan, bangunan ataupun nilai estetika</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_blue.png"
|
||
style="width:12px;height:12px"></td>
|
||
<td width="15%">51-100</td>
|
||
<td width="80%" class="bg-blue"> Sedang</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td>Tingkat kualitas udara yang tidak berpengaruh pada kesehatan manusia ataupun hewan
|
||
tetapi berpengaruh pada tumbuhan yang sensitif, dan nilai estetika</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_yellow.png"
|
||
style="width:12px;height:12px"></td>
|
||
<td width="15%">101-199</td>
|
||
<td width="80%" class="bg-yellow"> Tidak Sehat</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td>Tingkat kualitas udara yang bersifat merugikan pada manusia ataupun kelompok hewan
|
||
yang
|
||
sensitif atau bisa menimbulkan kerusakan pada tumbuhan ataupun nilai estetika</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_red.png"
|
||
style="width:12px;height:12px"></td>
|
||
<td width="15%">200-299</td>
|
||
<td width="80%" class="bg-red"> Sangat Tidak Sehat</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td>Tingkat kualitas udara yang dapat merugikan kesehatan pada sejumlah segmen populasi
|
||
yang
|
||
terpapar</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_black.png"
|
||
style="width:12px;height:12px"></td>
|
||
<td width="15%">300-500</td>
|
||
<td width="80%"> Berbahaya</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td>Tingkat kualitas udara berbahaya yang secara umum dapat merugikan kesehatan yang
|
||
serius
|
||
pada populasi</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@section scripts {
|
||
<script>
|
||
const copy = document.querySelector(".logos-slide").cloneNode(true);
|
||
document.querySelector(".logos").appendChild(copy);
|
||
execute_function()
|
||
|
||
$(window).resize(function () {
|
||
carouselResponsive();
|
||
});
|
||
|
||
async function execute_function() {
|
||
carouselResponsive()
|
||
generate_konten()
|
||
generate_ispu()
|
||
temp_assign_ispu()
|
||
}
|
||
|
||
function carouselResponsive() {
|
||
let width = $(window).width();
|
||
let data = {
|
||
'items': 1,
|
||
'loop': true,
|
||
'autoHeight': true,
|
||
'margin': 10,
|
||
'autoplay': true,
|
||
'autoplayTimeout': 3000,
|
||
'autoplayHoverPause': true
|
||
};
|
||
|
||
width < 768 ? data['nav'] = false : data['nav'] = true;
|
||
|
||
$("#berita-carousel").data("plugin-options", data);
|
||
}
|
||
|
||
async function kualitas_udara() {
|
||
const country = "Indonesia"
|
||
const state = "Jakarta"
|
||
const city = "Jakarta"
|
||
const key = "adf2d4c4-7a82-495a-8710-dc754d18ae47"
|
||
const udara = await get_data(`http://api.airvisual.com/v2/city?city=${city}&state=${state}&country=${country}&key=${key}`)
|
||
// console.log(udara.data);
|
||
}
|
||
|
||
async function get_data(endpoint) {
|
||
return await fetch(endpoint).then(res => res.json())
|
||
}
|
||
|
||
function getTimeAgo(referenceDate) {
|
||
const currentDate = new Date();
|
||
const referenceTime = new Date(referenceDate).getTime();
|
||
const currentTime = currentDate.getTime();
|
||
const timeDifference = currentTime - referenceTime;
|
||
|
||
const seconds = Math.floor(timeDifference / 1000);
|
||
const minutes = Math.floor(seconds / 60);
|
||
const hours = Math.floor(minutes / 60);
|
||
const days = Math.floor(hours / 24);
|
||
const months = Math.floor(days / 30);
|
||
const years = Math.floor(months / 12);
|
||
|
||
if (years > 0) {
|
||
return `${years} tahun yang lalu`;
|
||
} else if (months > 0) {
|
||
return `${months} bulan yang lalu`;
|
||
} else if (days > 0) {
|
||
return `${days} hari yang lalu`;
|
||
} else if (hours > 0) {
|
||
return `${hours} jam yang lalu`;
|
||
} else if (minutes > 0) {
|
||
return `${minutes} menit yang lalu`;
|
||
} else {
|
||
return `${seconds} detik yang lalu`;
|
||
}
|
||
}
|
||
|
||
function generate_konten() {
|
||
const data = [
|
||
{
|
||
"judul": "Pemandangan Indah di Pegunungan",
|
||
"kategori": "Wisata Alam",
|
||
"ukuran_pixel": {
|
||
"lebar": 1920,
|
||
"tinggi": 1080
|
||
},
|
||
"tanggal": "2023-12-07T08:45:00.000Z"
|
||
},
|
||
{
|
||
"judul": "Resep Masakan Tradisional",
|
||
"kategori": "Kuliner",
|
||
"ukuran_pixel": {
|
||
"lebar": 1280,
|
||
"tinggi": 720
|
||
},
|
||
"tanggal": "2023-10-08T08:45:00.000Z"
|
||
},
|
||
{
|
||
"judul": "Tren Mode Terkini",
|
||
"kategori": "Fashion",
|
||
"ukuran_pixel": {
|
||
"lebar": 1440,
|
||
"tinggi": 900
|
||
},
|
||
"tanggal": "2023-01-20T15:20:00.000Z"
|
||
},
|
||
{
|
||
"judul": "Teknologi Canggih di Era Modern",
|
||
"kategori": "Teknologi",
|
||
"ukuran_pixel": {
|
||
"lebar": 1920,
|
||
"tinggi": 1080
|
||
},
|
||
"tanggal": "2020-11-05T09:10:00.000Z"
|
||
},
|
||
{
|
||
"judul": "Seni Lukis Kontemporer",
|
||
"kategori": "Seni",
|
||
"ukuran_pixel": {
|
||
"lebar": 1600,
|
||
"tinggi": 900
|
||
},
|
||
"tanggal": "2022-08-12T14:15:00.000Z"
|
||
}
|
||
]
|
||
|
||
let element = ""
|
||
for (const value of data) {
|
||
element += `
|
||
<div
|
||
class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
|
||
<span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
|
||
<img data-lazy="https://source.unsplash.com/random/${value.ukuran_pixel.lebar}×${value.ukuran_pixel.tinggi}/?${value.kategori}" class="img-fluid w-100 h-100 lazy"
|
||
style="object-fit: cover;" alt="${value.judul}">
|
||
<span class="thumb-info-title p-3 p-md-4" style="min-height: 20%">
|
||
<span class="thumb-info-inner line-height-3 text-break overflow-ellipsis-3">${value.judul}</span>
|
||
<span class="thumb-info-type opacity-8">${value.kategori} | ${getTimeAgo(value.tanggal)}</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
`
|
||
}
|
||
$("#berita-carousel").html(element)
|
||
}
|
||
|
||
function generate_ispu() {
|
||
const data = [
|
||
{
|
||
"id": 1,
|
||
"status": "baik",
|
||
"class_name": "baik",
|
||
"nilai": 25,
|
||
"icons": "😊"
|
||
},
|
||
{
|
||
"id": 2,
|
||
"status": "sedang",
|
||
"class_name": "sedang",
|
||
"nilai": 75,
|
||
"icons": "😐"
|
||
},
|
||
{
|
||
"id": 3,
|
||
"status": "tidak sehat",
|
||
"class_name": "tidak-sehat",
|
||
"nilai": 150,
|
||
"icons": "😷"
|
||
},
|
||
{
|
||
"id": 4,
|
||
"status": "sangat tidak sehat",
|
||
"class_name": "sangat-tidak-sehat",
|
||
"nilai": 250,
|
||
"icons": "😰"
|
||
},
|
||
{
|
||
"id": 5,
|
||
"status": "berbahaya",
|
||
"class_name": "berbahaya",
|
||
"nilai": 305,
|
||
"icons": "🚫"
|
||
}
|
||
]
|
||
|
||
// Mencari data dengan nilai terbesar
|
||
const maxData = data.reduce((max, current) => (current.nilai > max.nilai ? current : max), data[0])
|
||
assign_ispu(maxData)
|
||
|
||
|
||
$("#lokasi").on("change", function (e) {
|
||
const id = e.target.value
|
||
const selected = data.filter(data => {
|
||
return data.id == id
|
||
})
|
||
assign_ispu(selected[0])
|
||
})
|
||
}
|
||
|
||
function assign_ispu(data) {
|
||
if (!data.class_name) {
|
||
console.log("class_name tidak ditemukan!");
|
||
}
|
||
$("#ispu-container").attr("class", `row align-items-stretch text-center mx-1 mx-md-0 rounded-4 ${data.class_name}`)
|
||
$("#ispu-icons").text(data.icons)
|
||
$("#ispu-status").text(data.status)
|
||
$("#ispu-value").text(data.nilai)
|
||
$("#lokasi").html(
|
||
`
|
||
<option value="1" ${data.id == 1 ? "selected" : ""}>Jakarta Timur - Lubang Buaya</option>
|
||
<option value="2" ${data.id == 2 ? "selected" : ""}>Jakarta Utara - Kelapa Gading</option>
|
||
<option value="3" ${data.id == 3 ? "selected" : ""}>Jakarta Barat - Kebun Jeruk</option>
|
||
<option value="4" ${data.id == 4 ? "selected" : ""}>Jakarta Pusat - Bundaran HI</option>
|
||
<option value="5" ${data.id == 5 ? "selected" : ""}>Jakarta Selatan - Jagakarsa</option>
|
||
`
|
||
)
|
||
}
|
||
|
||
function temp_assign_ispu(id) {
|
||
const data = [
|
||
{
|
||
"id": 1,
|
||
"status": "baik",
|
||
"class_name": "baik",
|
||
"nilai": 25,
|
||
"icons": "😊"
|
||
},
|
||
{
|
||
"id": 2,
|
||
"status": "sedang",
|
||
"class_name": "sedang",
|
||
"nilai": 75,
|
||
"icons": "😐"
|
||
},
|
||
{
|
||
"id": 3,
|
||
"status": "tidak sehat",
|
||
"class_name": "tidak-sehat",
|
||
"nilai": 150,
|
||
"icons": "😷"
|
||
},
|
||
{
|
||
"id": 4,
|
||
"status": "sangat tidak sehat",
|
||
"class_name": "sangat-tidak-sehat",
|
||
"nilai": 250,
|
||
"icons": "😰"
|
||
},
|
||
{
|
||
"id": 5,
|
||
"status": "berbahaya",
|
||
"class_name": "berbahaya",
|
||
"nilai": 305,
|
||
"icons": "🚫"
|
||
}
|
||
]
|
||
|
||
const selected = data.filter(data => {
|
||
return data.id == id
|
||
})
|
||
|
||
assign_ispu(selected[0])
|
||
|
||
}
|
||
</script>
|
||
} |