amar
/
webdlh-net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update detail berita -slider

main
marszayn 2025-06-12 15:57:06 +07:00
parent 10008e794c
commit 3fb481f1f9
27 changed files with 218 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
Views/Publikasi/Peraturan.cshtml
View File

@ -45,7 +45,7 @@
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Kategori:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<select id="kategoriSelect" class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Pengelolaan Limbah B3</option>
<option>Pengendalian Pencemaran Air</option>
<option>Pengendalian Pencemaran Udara</option>
@ -69,10 +69,10 @@
<div class="flex flex-col">
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800 border border-orange-200 mb-4 gap-2">
<i class="w-4 h-4 text-green-600" data-lucide="book-open-text"></i>
<h2 class="text-sm font-semibold">Pengelolaan Limbah B3</h2>
<h2 id="kategoriLabel" class="text-sm font-semibold">Pengelolaan Limbah B3</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div id="dokumenGrid" class="grid grid-cols-1 md:grid-cols-4 gap-4">
<!-- Daftar dokumen default -->
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
@ -85,29 +85,6 @@
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
@ -120,13 +97,7 @@
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<!-- ...tambahkan dokumen lain jika perlu... -->
</div>
</div>
@ -162,4 +133,89 @@
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
<script type="text/javascript">
const dokumenHTML = {
"Pengelolaan Limbah B3": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
`,
"Pengendalian Pencemaran Air": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Panduan Pengendalian Pencemaran Air 2023</h3>
</div>
</div>
`,
"Pengendalian Pencemaran Udara": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Pedoman Pengendalian Udara Bersih 2024</h3>
</div>
</div>
`,
"Pengelolaan Limbah Padat": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Standar Teknis Pengelolaan Limbah Padat</h3>
</div>
</div>
`,
"Peraturan dan Pedoman Terkait...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Pengendalian Dampak Perubahan Iklim</h3>
</div>
</div>
`,
"Peraturan Gubernur Jakarta Sadar...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Gubernur Jakarta Sadar Sampah</h3>
</div>
</div>
`
};
$(function() {
function getSelectedKategori() {
let selected = $('#kategoriSelect option:selected').text();
if (selected.startsWith("Peraturan dan Pedoman")) return "Peraturan dan Pedoman Terkait...";
if (selected.startsWith("Peraturan Gubernur Jakarta Sadar")) return "Peraturan Gubernur Jakarta Sadar...";
return selected;
}
$('#kategoriSelect').on('change', function() {
const kategori = getSelectedKategori();
$('#kategoriLabel').text($(this).find('option:selected').text());
$('#dokumenGrid').html(dokumenHTML[kategori] || '');
});
});
</script>
</register-block>

61
Views/Seputar/DetailBerita.cshtml
View File

@ -24,7 +24,22 @@
<!-- Main Content -->
<div class="w-full md:w-3/4">
<div class="bg-white rounded-2xl shadow p-6">
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-full aspect-[2/1] rounded-2xl mb-6 object-cover"></h1>
<div id="berita-slider" class="mb-6">
<div class="relative">
<button type="button" id="sliderPrev" class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-green-100 rounded-full p-2 shadow" aria-label="Sebelumnya">
<svg class="w-6 h-6 text-green-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</button>
<img id="mainImage" src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-full aspect-[2/1] rounded-2xl object-cover transition-all duration-300">
<button type="button" id="sliderNext" class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-green-100 rounded-full p-2 shadow" aria-label="Berikutnya">
<svg class="w-6 h-6 text-green-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</button>
</div>
<div class="flex gap-2 mt-3 justify-center">
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-12 rounded-lg object-cover cursor-pointer border-2 border-green-500 opacity-100 transition-all duration-200" onclick="setMainImage(this)" alt="Preview 1">
<img src="@Url.Content("~/assets/images/home/berita2.jpeg")" class="w-20 h-12 rounded-lg object-cover cursor-pointer border-2 border-transparent hover:border-green-500 opacity-60 transition-all duration-200" onclick="setMainImage(this)" alt="Preview 2">
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-12 rounded-lg object-cover cursor-pointer border-2 border-transparent hover:border-green-500 opacity-60 transition-all duration-200" onclick="setMainImage(this)" alt="Preview 3">
</div>
</div>
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
DLH Siagakan 1.050 Petugas Pastikan Kebersihan Jakarta Saat Hari Buruh
</h1>
@ -172,8 +187,48 @@
}
});
});
</script>
<script>
function setMainImage(img) {
const main = document.getElementById('mainImage');
main.src = img.src;
// Highlight border & opacity
document.querySelectorAll('#berita-slider .flex img').forEach(function(el) {
el.classList.remove('border-green-500');
el.classList.add('border-transparent');
el.style.opacity = '0.6';
});
img.classList.remove('border-transparent');
img.classList.add('border-green-500');
img.style.opacity = '1';
}
// Navigasi slider
document.addEventListener('DOMContentLoaded', function() {
const thumbs = Array.from(document.querySelectorAll('#berita-slider .flex img'));
let currentIdx = thumbs.findIndex(img => img.classList.contains('border-green-500'));
function showImage(idx) {
if (idx < 0 || idx >= thumbs.length) return;
setMainImage(thumbs[idx]);
currentIdx = idx;
}
document.getElementById('sliderPrev').addEventListener('click', function() {
showImage((currentIdx - 1 + thumbs.length) % thumbs.length);
});
document.getElementById('sliderNext').addEventListener('click', function() {
showImage((currentIdx + 1) % thumbs.length);
});
// manual klik ges
thumbs.forEach((img, idx) => {
img.addEventListener('click', function() {
currentIdx = idx;
});
});
// Opacity disini
thumbs.forEach((img, idx) => {
img.style.opacity = img.classList.contains('border-green-500') ? '1' : '0.6';
});
});
function shareToFacebook() {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(document.querySelector('h1').textContent);

BIN
bin/Debug/net9.0/dlh-net.dll
View File

Binary file not shown.

BIN
bin/Debug/net9.0/dlh-net.exe
View File

Binary file not shown.

BIN
bin/Debug/net9.0/dlh-net.pdb
View File

Binary file not shown.

2
bin/Debug/net9.0/dlh-net.staticwebassets.endpoints.json
View File

File diff suppressed because one or more lines are too long

2
bin/Debug/net9.0/dlh-net.staticwebassets.runtime.json
View File

File diff suppressed because one or more lines are too long

BIN
obj/Debug/net9.0/apphost.exe
View File

Binary file not shown.

BIN
obj/Debug/net9.0/compressed/hc40dw3fux-icjhhgs8zp.gz
View File

Binary file not shown.

2
obj/Debug/net9.0/dlh-net.AssemblyInfo.cs
View File

@ -13,7 +13,7 @@ using System.Reflection;
[assembly: System.Reflection.AssemblyCompanyAttribute("dlh-net")]
[assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
[assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+ff1e690e639e593fb7c48a05abf04e6ab2784e52")]
[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+10008e794cfb8ed52220417cc2c874b021093ecf")]
[assembly: System.Reflection.AssemblyProductAttribute("dlh-net")]
[assembly: System.Reflection.AssemblyTitleAttribute("dlh-net")]
[assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]

2
obj/Debug/net9.0/dlh-net.AssemblyInfoInputs.cache
View File

@ -1 +1 @@
9320b1932c42f2004150973455cfc96d276d347acf81bb8fde03b7547117632f
51b0091c9bc9d5bebf036f8de5b6eb8bb5b5edf5ccfc420cda8bb0b19348bdc5

2
obj/Debug/net9.0/dlh-net.csproj.FileListAbsolute.txt
View File

@ -6440,4 +6440,4 @@ C:\laragon\www\dlh-net\obj\Debug\net9.0\rpswa.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\rjimswa.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\rjsmrazor.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\rjsmcshtml.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-icjhhgs8zp.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-nv0eo9yu5k.gz

BIN
obj/Debug/net9.0/dlh-net.dll
View File

Binary file not shown.

BIN
obj/Debug/net9.0/dlh-net.pdb
View File

Binary file not shown.

2
obj/Debug/net9.0/rbcswa.dswa.cache.json
View File

File diff suppressed because one or more lines are too long

BIN
obj/Debug/net9.0/ref/dlh-net.dll
View File

Binary file not shown.

BIN
obj/Debug/net9.0/refint/dlh-net.dll
View File

Binary file not shown.

2
obj/Debug/net9.0/rjimswa.dswa.cache.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/rjsmcshtml.dswa.cache.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/rjsmrazor.dswa.cache.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/rpswa.dswa.cache.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/staticwebassets.build.endpoints.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/staticwebassets.build.json
View File

File diff suppressed because one or more lines are too long

2
obj/Debug/net9.0/staticwebassets.build.json.cache
View File

@ -1 +1 @@
MGBkcf8BzLqzlGyg1sPt/5VlO3+r3Nc9VfvDL4GSRxE=
wuXlcKp3N92JQemfnMaWSpCyP7qlCJaEMpFSJrLDJo0=

2
obj/Debug/net9.0/staticwebassets.development.json
View File

File diff suppressed because one or more lines are too long

BIN
wwwroot/assets/images/home/berita2.jpeg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 KiB

13
wwwroot/css/output.css
View File

@ -492,6 +492,9 @@
.left-1\/2 {
left: calc(1/2 * 100%);
}
.left-2 {
left: calc(var(--spacing) * 2);
}
.left-4 {
left: calc(var(--spacing) * 4);
}
@ -1726,6 +1729,9 @@
.border-teal-500 {
border-color: var(--color-teal-500);
}
.border-transparent {
border-color: transparent;
}
.border-white {
border-color: var(--color-white);
}
@ -3671,6 +3677,13 @@
}
}
}
.hover\:border-green-500 {
&:hover {
@media (hover: hover) {
border-color: var(--color-green-500);
}
}
}
.hover\:border-orange-400 {
&:hover {
@media (hover: hover) {