update
marszayn
parent
665891422c
commit
955d33b8ea
|
|
@ -12,81 +12,66 @@ namespace MyApp.Namespace
|
|||
return View();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GET: PublikasiController
|
||||
public ActionResult Index()
|
||||
[HttpGet("peraturan")]
|
||||
public IActionResult Peraturan()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
// GET: PublikasiController/Details/5
|
||||
public ActionResult Details(int id)
|
||||
[HttpGet("laporan-kualitas-air")]
|
||||
public IActionResult LaporanKualitasAir()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
// GET: PublikasiController/Create
|
||||
public ActionResult Create()
|
||||
[HttpGet("laporan-keuangan")]
|
||||
public IActionResult LaporanKeuangan()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
// POST: PublikasiController/Create
|
||||
[HttpPost]
|
||||
[ValidateAntiForgeryToken]
|
||||
public ActionResult Create(IFormCollection collection)
|
||||
{
|
||||
try
|
||||
{
|
||||
return RedirectToAction(nameof(Index));
|
||||
}
|
||||
catch
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
||||
// GET: PublikasiController/Edit/5
|
||||
public ActionResult Edit(int id)
|
||||
[HttpGet("kajian")]
|
||||
public IActionResult Kajian()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
// POST: PublikasiController/Edit/5
|
||||
[HttpPost]
|
||||
[ValidateAntiForgeryToken]
|
||||
public ActionResult Edit(int id, IFormCollection collection)
|
||||
{
|
||||
try
|
||||
{
|
||||
return RedirectToAction(nameof(Index));
|
||||
}
|
||||
catch
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
||||
// GET: PublikasiController/Delete/5
|
||||
public ActionResult Delete(int id)
|
||||
[HttpGet("kehati")]
|
||||
public IActionResult KeanekaragamanHayati()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
// POST: PublikasiController/Delete/5
|
||||
[HttpPost]
|
||||
[ValidateAntiForgeryToken]
|
||||
public ActionResult Delete(int id, IFormCollection collection)
|
||||
{
|
||||
try
|
||||
{
|
||||
return RedirectToAction(nameof(Index));
|
||||
}
|
||||
catch
|
||||
[HttpGet("gas-rumah-kaca")]
|
||||
public IActionResult GasRumahKaca()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[HttpGet("klhs")]
|
||||
public IActionResult KLHS()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet("monitoring-emisi")]
|
||||
public IActionResult MonitoringEmisi()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet("laporan-kualitas-udara")]
|
||||
public IActionResult LaporanKualitasUdara()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet("iklh")]
|
||||
public IActionResult IKLH()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<section class="delay-[300ms] duration-[600ms] taos:translate-y-[100%] taos:opacity-0" data-taos-offset="300">
|
||||
<section class="delay-[300ms] duration-[600ms]">
|
||||
<div class="container mx-auto px-4 py-12 max-w-6xl">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start mb-6">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start mb-6" data-aos="fade-up" data-aos-duration="800">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Berita Terkini</h2>
|
||||
<p class="text-gray-600 mt-2">
|
||||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" class="mt-4 md:mt-0 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full flex items-center">
|
||||
<a href="#" class="mt-4 md:mt-0 bg-oren hover:bg-orange-600 text-white px-6 py-2 rounded-full flex items-center">
|
||||
Lihat Semua
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
|
|
@ -17,12 +17,12 @@
|
|||
|
||||
<div class="flex flex-col gap-6 md:flex-row">
|
||||
<!-- Main news item (large) -->
|
||||
<div class="w-full md:w-2/3">
|
||||
<div class="max-w-6xl" data-aos="fade-right" data-aos-duration="800">
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Perayaan Malam Tahun Baru" class="w-full h-auto object-cover" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="bg-orange-500 text-white text-sm px-3 py-1 rounded-md">Artikel</span>
|
||||
<span class="bg-oren text-white text-sm px-3 py-1 rounded-md">Artikel</span>
|
||||
<span class="text-gray-600 ml-2 text-sm">17 Mei 2025</span>
|
||||
<h3 class="text-gray-900 text-xl font-bold mt-2">Perayaan Malam Tahun Baru di Jakarta Hasilkan 132 Ton Sampah</h3>
|
||||
<p class="text-gray-600">
|
||||
|
|
@ -38,14 +38,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Right side news items (smaller) -->
|
||||
<div class="w-full md:w-1/3 flex flex-col gap-4">
|
||||
<div class="w-full md:w-1/3 flex flex-col gap-4" data-aos="fade-left" data-aos-duration="800">
|
||||
@for (var i = 0; i < 4; i++)
|
||||
{
|
||||
<div class="flex space-x-4 border-b border-gray-100 pb-4">
|
||||
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-32 h-24 object-cover rounded-lg" />
|
||||
<a href="#" class="flex flex-col justify-center">
|
||||
<div class="flex items-center mb-1">
|
||||
<span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">Artikel</span>
|
||||
<span class="bg-oren text-white text-xs px-2 py-1 rounded">Artikel</span>
|
||||
<span class="text-gray-500 text-xs ml-2">17 Mei 2025</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 hover:text-orange-500 transition-colors duration-300">
|
||||
|
|
|
|||
|
|
@ -21,24 +21,35 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="animate-on-scroll" data-aos="fade-up" data-aos-duration="2000" data-aos-once="true">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<!-- Jumlah Sampah Card -->
|
||||
<div class="relative bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 text-white p-6 rounded-lg md:col-span-6 overflow-hidden h-[240px] md:h-[488px] group">
|
||||
<div class="info-card relative bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 text-white p-6 rounded-xl overflow-hidden h-[140px] group transition-all duration-500 cursor-pointer transform hover:scale-[1.02] hover:shadow-lg card-3d" data-color="orange" data-type="trash">
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip absolute -top-12 left-1/2 -translate-x-1/2 bg-black/80 text-white px-3 py-1.5 rounded-md text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-20 backdrop-blur-sm">
|
||||
<span>Klik untuk detail informasi</span>
|
||||
<div class="tooltip-arrow absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black/80 rotate-45"></div>
|
||||
</div>
|
||||
|
||||
<div class="particle-container"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full md:p-6">
|
||||
<div class="card-glare absolute inset-0 opacity-0 transition-opacity"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-2xl leading-tight">Jumlah Sampah<br>Masuk TPST<br>Bantar Gebang</h3>
|
||||
<h3 class="text-lg md:text-xl leading-tight card-title">Jumlah Sampah<br>Masuk TPST<br>Bantar Gebang</h3>
|
||||
</div>
|
||||
<div>
|
||||
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="trash-2"></i>
|
||||
<div class="icon-container relative">
|
||||
<i class="icon-main h-8 w-8 md:h-10 md:w-10" data-lucide="trash-2"></i>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="text-lg md:text-xl">Ton</span>
|
||||
<div class="text-left card-content opacity-0 pointer-events-none">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
|
||||
<div class="mt-3 inline-flex items-center bg-orange-600 bg-opacity-50 rounded-md px-3 py-1">
|
||||
<div class="text-lg md:text-sm font-normal">Ton</div>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center bg-orange-700 bg-opacity-50 rounded-md px-3 py-1 trend-indicator">
|
||||
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
||||
<span class="text-sm">2.5%</span>
|
||||
<span class="ml-1 text-sm">dari kemarin</span>
|
||||
|
|
@ -47,26 +58,68 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-6 grid grid-rows-1 md:grid-rows-2 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Kualitas Udara Terbaik -->
|
||||
<div class="relative bg-green-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-slow"></div>
|
||||
<!-- Jumlah Truk Card -->
|
||||
<div class="info-card relative bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 text-white rounded-xl p-6 h-[140px] overflow-hidden group transition-all duration-500 cursor-pointer transform hover:scale-[1.02] hover:shadow-lg card-3d" data-color="yellow" data-type="truck">
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip absolute -top-12 left-1/2 -translate-x-1/2 bg-black/80 text-white px-3 py-1.5 rounded-md text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-20 backdrop-blur-sm">
|
||||
<span>Klik untuk detail informasi</span>
|
||||
<div class="tooltip-arrow absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black/80 rotate-45"></div>
|
||||
</div>
|
||||
|
||||
<div class="particle-container"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-diagonal"></div>
|
||||
<div class="card-glare absolute inset-0 opacity-0 transition-opacity"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terbaik</h3>
|
||||
<h3 class="text-lg md:text-xl leading-tight card-title">Jumlah Truk<br>Masuk TPST<br>Bantar Gebang</h3>
|
||||
</div>
|
||||
<div class="icon-container relative">
|
||||
<i class="icon-main h-8 w-8 md:h-10 md:w-10" data-lucide="truck"></i>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left card-content opacity-0 pointer-events-none">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
|
||||
<div class="text-lg md:text-sm font-normal">Unit</div>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center bg-yellow-700 bg-opacity-50 rounded-md px-3 py-1 trend-indicator">
|
||||
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
||||
<span class="text-sm">2.5%</span>
|
||||
<span class="ml-1 text-sm">dari kemarin</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kualitas Udara Terbaik -->
|
||||
<div class="info-card relative bg-gradient-to-br from-green-500 via-green-600 to-green-700 text-white p-6 rounded-xl overflow-hidden h-[140px] group transition-all duration-500 cursor-pointer transform hover:scale-[1.02] hover:shadow-lg card-3d" data-color="green" data-type="wind">
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip absolute -top-12 left-1/2 -translate-x-1/2 bg-black/80 text-white px-3 py-1.5 rounded-md text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-20 backdrop-blur-sm">
|
||||
<span>Klik untuk detail informasi</span>
|
||||
<div class="tooltip-arrow absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black/80 rotate-45"></div>
|
||||
</div>
|
||||
|
||||
<div class="particle-container"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-slow"></div>
|
||||
<div class="card-glare absolute inset-0 opacity-0 transition-opacity"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="wind"></i>
|
||||
<h3 class="text-lg md:text-xl leading-tight card-title">Kualitas Udara<br>Terbaik</h3>
|
||||
</div>
|
||||
<div class="icon-container relative">
|
||||
<i class="icon-main h-8 w-8 md:h-10 md:w-10" data-lucide="wind"></i>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-left card-content opacity-0 pointer-events-none">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
|
||||
<div class="text-lg md:text-sm font-normal">ISPU</div>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center bg-green-700 bg-opacity-50 rounded-md px-3 py-1">
|
||||
<div class="mt-3 inline-flex items-center bg-green-700 bg-opacity-50 rounded-md px-3 py-1 trend-indicator">
|
||||
<i class="h-4 w-4 mr-1" data-lucide="arrow-up"></i>
|
||||
<span class="text-sm">2.5 μg/</span>
|
||||
<span class="ml-1 text-sm">PM2</span>
|
||||
|
|
@ -76,24 +129,32 @@
|
|||
</div>
|
||||
|
||||
<!-- Kualitas Udara Terburuk -->
|
||||
<div class="relative bg-red-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
|
||||
<div class="info-card relative bg-gradient-to-br from-red-500 via-red-600 to-red-700 text-white p-6 rounded-xl overflow-hidden h-[140px] group transition-all duration-500 cursor-pointer transform hover:scale-[1.02] hover:shadow-lg card-3d" data-color="red" data-type="tornado">
|
||||
<!-- Tooltip -->
|
||||
<div class="tooltip absolute -top-12 left-1/2 -translate-x-1/2 bg-black/80 text-white px-3 py-1.5 rounded-md text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-20 backdrop-blur-sm">
|
||||
<span>Klik untuk detail informasi</span>
|
||||
<div class="tooltip-arrow absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black/80 rotate-45"></div>
|
||||
</div>
|
||||
|
||||
<div class="particle-container"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-reverse"></div>
|
||||
<div class="card-glare absolute inset-0 opacity-0 transition-opacity"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terburuk</h3>
|
||||
<h3 class="text-lg md:text-xl leading-tight card-title">Kualitas Udara<br>Terburuk</h3>
|
||||
</div>
|
||||
<div>
|
||||
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="tornado"></i>
|
||||
<div class="icon-container relative">
|
||||
<i class="icon-main h-8 w-8 md:h-10 md:w-10" data-lucide="tornado"></i>
|
||||
<div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-left card-content opacity-0 pointer-events-none">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
|
||||
<div class="text-lg md:text-sm font-normal">ISPU</div>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center bg-red-700 bg-opacity-50 rounded-md px-3 py-1">
|
||||
|
||||
<div class="mt-3 inline-flex items-center bg-red-700 bg-opacity-50 rounded-md px-3 py-1 trend-indicator">
|
||||
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
||||
<span class="text-sm">2.5 μg/</span>
|
||||
<span class="ml-1 text-sm">PM2</span>
|
||||
|
|
@ -101,34 +162,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jumlah Truk Card -->
|
||||
<div class="relative bg-yellow-400 text-white rounded-lg p-6 h-[240px] md:h-[234px] overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-diagonal"></div>
|
||||
<div class="relative z-10 flex flex-col justify-between h-full">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-lg md:text-xl leading-tight">Jumlah Truk<br>Masuk TPST<br>Bantar Gebang</h3>
|
||||
</div>
|
||||
<div>
|
||||
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="truck"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
|
||||
<div class="text-lg md:text-sm font-normal">Unit</div>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center bg-yellow-500 bg-opacity-50 rounded-md px-3 py-1">
|
||||
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
||||
<span class="text-sm">2.5%</span>
|
||||
<span class="ml-1 text-sm">dari kemarin</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -188,11 +223,163 @@
|
|||
animation: spotlight-diagonal 4.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-card:hover .card-glare {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.info-card.expanded {
|
||||
height: 240px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-5px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-glare {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.35) 0%,
|
||||
rgba(255, 255, 255, 0) 60%
|
||||
);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.trend-indicator {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card.expanded .trend-indicator {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.info-card.expanded .icon-container {
|
||||
transform: scale(1.2) translateY(-5px);
|
||||
}
|
||||
|
||||
.icon-blob {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.info-card.expanded .icon-blob {
|
||||
transform: scale(2);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.info-card:hover .icon-blob {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
@@media (prefers-reduced-motion: no-preference) {
|
||||
.rolling-number {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rolling-number::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
bottom: 5px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scaleX(0);
|
||||
transition: transform 1s ease;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.info-card.expanded .rolling-number::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Card Effects */
|
||||
.info-card[data-type="trash"].expanded {
|
||||
background-image: linear-gradient(to bottom right, #f97316, #ea580c, #c2410c);
|
||||
}
|
||||
|
||||
.info-card[data-type="wind"].expanded {
|
||||
background-image: linear-gradient(to bottom right, #22c55e, #16a34a, #15803d);
|
||||
}
|
||||
|
||||
.info-card[data-type="tornado"].expanded {
|
||||
background-image: linear-gradient(to bottom right, #ef4444, #dc2626, #b91c1c);
|
||||
}
|
||||
|
||||
.info-card[data-type="truck"].expanded {
|
||||
background-image: linear-gradient(to bottom right, #facc15, #eab308, #ca8a04);
|
||||
}
|
||||
|
||||
/* Tooltip Styling */
|
||||
.tooltip {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-card:hover .tooltip {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.info-card.expanded .tooltip {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* Responsive tooltip */
|
||||
@@media (max-width: 768px) {
|
||||
.tooltip {
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
left: 50%;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse animation for tooltip visibility */
|
||||
@@keyframes pulseScale {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.info-card:not(.expanded):hover .icon-container {
|
||||
animation: pulseScale 1.5s infinite;
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsInformasi">
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
|
||||
<script>
|
||||
AOS.init();
|
||||
|
|
@ -200,8 +387,170 @@
|
|||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Rolling numbers animation
|
||||
const rollingNumbers = document.querySelectorAll(".rolling-number");
|
||||
const infoCards = document.querySelectorAll(".info-card");
|
||||
|
||||
// Add 3D card effect
|
||||
infoCards.forEach(card => {
|
||||
card.addEventListener('mousemove', function(e) {
|
||||
if (!this.classList.contains('expanded')) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateY = (x - centerX) / 20;
|
||||
const rotateX = (centerY - y) / 20;
|
||||
|
||||
gsap.to(this, {
|
||||
rotateY: rotateY,
|
||||
rotateX: rotateX,
|
||||
duration: 0.5,
|
||||
ease: "power1.out",
|
||||
});
|
||||
|
||||
// Move glare with cursor
|
||||
const glare = this.querySelector('.card-glare');
|
||||
gsap.to(glare, {
|
||||
opacity: 0.15,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
duration: 0.3
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
if (!this.classList.contains('expanded')) {
|
||||
gsap.to(this, {
|
||||
rotateY: 0,
|
||||
rotateX: 0,
|
||||
duration: 0.5,
|
||||
ease: "elastic.out(1, 0.3)"
|
||||
});
|
||||
|
||||
const glare = this.querySelector('.card-glare');
|
||||
gsap.to(glare, {
|
||||
opacity: 0,
|
||||
duration: 0.3
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Create particles for each card
|
||||
const particleContainer = card.querySelector('.particle-container');
|
||||
const cardType = card.getAttribute('data-type');
|
||||
createParticles(particleContainer, cardType);
|
||||
});
|
||||
|
||||
function createParticles(container, type) {
|
||||
const particleCount = 12;
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.classList.add('particle');
|
||||
|
||||
// Set size (varied)
|
||||
const size = Math.random() * 4 + 2;
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
|
||||
// Set initial position
|
||||
const posX = Math.random() * 100;
|
||||
const posY = Math.random() * 100;
|
||||
particle.style.left = `${posX}%`;
|
||||
particle.style.top = `${posY}%`;
|
||||
|
||||
// Set opacity
|
||||
particle.style.opacity = Math.random() * 0.5 + 0.1;
|
||||
|
||||
// Add to container
|
||||
container.appendChild(particle);
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticles(card) {
|
||||
const particles = card.querySelectorAll('.particle');
|
||||
const cardType = card.getAttribute('data-type');
|
||||
let tl = gsap.timeline();
|
||||
|
||||
particles.forEach(particle => {
|
||||
const duration = Math.random() * 3 + 2;
|
||||
const delay = Math.random() * 2;
|
||||
|
||||
let animation;
|
||||
|
||||
switch(cardType) {
|
||||
case 'trash':
|
||||
// Upward floating particles
|
||||
animation = {
|
||||
y: `-=${Math.random() * 30 + 20}`,
|
||||
x: `+=${(Math.random() - 0.5) * 20}`,
|
||||
opacity: 0,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: "power1.out"
|
||||
};
|
||||
break;
|
||||
case 'wind':
|
||||
// Sideways flowing particles
|
||||
animation = {
|
||||
x: `+=${Math.random() * 50 + 30}`,
|
||||
y: `+=${(Math.random() - 0.5) * 20}`,
|
||||
opacity: 0,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: "power1.inOut"
|
||||
};
|
||||
break;
|
||||
case 'tornado':
|
||||
// Swirling particles
|
||||
const angle = Math.random() * 360;
|
||||
const radius = Math.random() * 30 + 10;
|
||||
animation = {
|
||||
motionPath: {
|
||||
path: `M0,0 C${radius/2},${-radius} ${radius},${-radius/2} ${radius},0 C${radius},${radius/2} ${radius/2},${radius} 0,0`,
|
||||
curviness: 1.5
|
||||
},
|
||||
opacity: 0,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: "power1.inOut"
|
||||
};
|
||||
break;
|
||||
case 'truck':
|
||||
// Horizontal line particles
|
||||
animation = {
|
||||
x: `+=${Math.random() * 40 + 20}`,
|
||||
opacity: 0,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: "power1.inOut"
|
||||
};
|
||||
break;
|
||||
default:
|
||||
animation = {
|
||||
y: `-=${Math.random() * 30 + 20}`,
|
||||
opacity: 0,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: "power1.out"
|
||||
};
|
||||
}
|
||||
|
||||
tl.fromTo(particle,
|
||||
{ opacity: 0, x: 0, y: 0, scale: 0 },
|
||||
{ ...animation, scale: 1, repeat: -1 },
|
||||
0
|
||||
);
|
||||
});
|
||||
|
||||
return tl;
|
||||
}
|
||||
|
||||
// Observer for rolling numbers
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
|
|
@ -229,6 +578,167 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
rollingNumbers.forEach((number) => {
|
||||
observer.observe(number);
|
||||
});
|
||||
|
||||
// Card click handlers with GSAP animation - Modified for independent toggling
|
||||
infoCards.forEach(card => {
|
||||
// Initialize particle animation property
|
||||
card._particleAnimation = null;
|
||||
|
||||
card.addEventListener('click', function() {
|
||||
const content = this.querySelector('.card-content');
|
||||
const iconContainer = this.querySelector('.icon-container');
|
||||
const iconBlob = this.querySelector('.icon-blob');
|
||||
|
||||
// Toggle current card without affecting others
|
||||
if (this.classList.contains('expanded')) {
|
||||
// Collapse
|
||||
gsap.to(this, {
|
||||
height: 140,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
clearProps: "transform",
|
||||
duration: 0.5,
|
||||
ease: "power3.out",
|
||||
onComplete: () => {
|
||||
this.classList.remove('expanded');
|
||||
}
|
||||
});
|
||||
|
||||
// Reset icon animation
|
||||
gsap.to(iconContainer, {
|
||||
scale: 1,
|
||||
y: 0,
|
||||
duration: 0.5,
|
||||
ease: "power3.out"
|
||||
});
|
||||
|
||||
// Reset icon blob
|
||||
gsap.to(iconBlob, {
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
ease: "power3.out"
|
||||
});
|
||||
|
||||
// Fade out content
|
||||
gsap.to(content, {
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
ease: "power3.out"
|
||||
});
|
||||
|
||||
// Stop particle animation if it exists
|
||||
if (this._particleAnimation) {
|
||||
this._particleAnimation.kill();
|
||||
this._particleAnimation = null;
|
||||
}
|
||||
} else {
|
||||
// Expand with unique animation per card type
|
||||
this.classList.add('expanded');
|
||||
|
||||
gsap.to(this, {
|
||||
height: 240,
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.2)"
|
||||
});
|
||||
|
||||
// Animate icon with bounce
|
||||
gsap.to(iconContainer, {
|
||||
scale: 1.2,
|
||||
y: -5,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.7)"
|
||||
});
|
||||
|
||||
// Animate icon blob
|
||||
gsap.to(iconBlob, {
|
||||
scale: 2,
|
||||
opacity: 0.15,
|
||||
duration: 0.5,
|
||||
ease: "power3.out"
|
||||
});
|
||||
|
||||
// Fade in content with slight delay and stagger
|
||||
const contentElements = content.children;
|
||||
gsap.to(content, {
|
||||
opacity: 1,
|
||||
duration: 0.1,
|
||||
delay: 0.2
|
||||
});
|
||||
|
||||
gsap.fromTo(contentElements,
|
||||
{ y: 15, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.1,
|
||||
delay: 0.2,
|
||||
ease: "back.out(1.2)"
|
||||
}
|
||||
);
|
||||
|
||||
// Start particle animation for this card only
|
||||
this._particleAnimation = animateParticles(this);
|
||||
|
||||
// Activate rolling numbers if they're in this card
|
||||
const cardNumbers = this.querySelectorAll('.rolling-number');
|
||||
cardNumbers.forEach(number => {
|
||||
const target = parseInt(number.getAttribute("data-target"));
|
||||
let current = 0;
|
||||
const increment = target / 60;
|
||||
|
||||
const updateNumber = () => {
|
||||
current += increment;
|
||||
if (current < target) {
|
||||
number.textContent = Math.floor(current);
|
||||
requestAnimationFrame(updateNumber);
|
||||
} else {
|
||||
number.textContent = target;
|
||||
}
|
||||
};
|
||||
|
||||
updateNumber();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add tooltip functionality
|
||||
infoCards.forEach(card => {
|
||||
// Set aria attributes for accessibility
|
||||
card.setAttribute('aria-label', 'Klik untuk detail informasi');
|
||||
card.setAttribute('role', 'button');
|
||||
card.setAttribute('tabindex', '0');
|
||||
|
||||
// Support keyboard interaction
|
||||
card.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide tooltip when card is expanded
|
||||
card.addEventListener('click', function() {
|
||||
const tooltip = this.querySelector('.tooltip');
|
||||
if (tooltip) {
|
||||
if (this.classList.contains('expanded')) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.visibility = 'hidden';
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (!this.classList.contains('expanded')) {
|
||||
tooltip.style.opacity = '';
|
||||
tooltip.style.visibility = '';
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
<section class="container mx-auto px-4 py-4 max-w-6xl">
|
||||
<section id="layanan-section" class="container mx-auto px-4 py-4 max-w-6xl">
|
||||
<div class="text-center mb-12 transition-all duration-700 ease-out" id="header-section">
|
||||
<h2 class="text-3xl font-bold mb-4">Layanan Kami</h2>
|
||||
<p class="text-gray-600 mb-12 text-balance">
|
||||
<p class="text-gray-600 mb-12 text-balance max-w-2xl mx-auto">
|
||||
Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- tab Mobile -->
|
||||
<div class="md:hidden mb-8">
|
||||
<div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-top">
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-orange-500 text-white shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Penjemputan e-Waste">
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-oren text-white shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Penjemputan e-Waste">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<i class="w-4 h-4 inline" data-lucide="trash-2"></i>
|
||||
<span>e-Waste</span>
|
||||
|
|
@ -20,14 +21,11 @@
|
|||
<span>Lab Testing</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-middle">
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bus Toilet">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<i class="w-4 h-4 inline" data-lucide="bus"></i>
|
||||
<span>Bus Toilet</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="AMDAL">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
|
|
@ -35,47 +33,37 @@
|
|||
<span>AMDAL</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-third">
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bulky Waste">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<i class="w-4 h-4 inline" data-lucide="box"></i>
|
||||
<i class="w-4 h-4 inline" data-lucide="truck"></i>
|
||||
<span>Bulky Waste</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Permohonan Informasi Publik">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<i class="w-4 h-4 inline" data-lucide="info"></i>
|
||||
<span>Info Publik</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3" id="mobile-tabs-bottom">
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="BPS-RW">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<LucideIcon Name="database" class="w-4 h-4 inline" />
|
||||
<i class="w-4 h-4 inline" data-lucide="database"></i>
|
||||
<span>BPS-RW</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Whistleblowing System">
|
||||
<div class="flex items-center justify-center space-x-2">
|
||||
<i class="w-4 h-4 inline" data-lucide="shield-check"></i>
|
||||
<i class="w-4 h-4 inline" data-lucide="alert-triangle"></i>
|
||||
<span>Whistleblowing</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Card Display -->
|
||||
<div class="md:hidden mb-8">
|
||||
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="relative h-48">
|
||||
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full h-full object-cover" id="mobile-service-image">
|
||||
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full h-full object-cover aspect-square" id="mobile-service-image">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-4 right-4 text-white">
|
||||
<h3 class="text-xl font-bold mb-2" id="mobile-service-title">Penjemputan e-Waste</h3>
|
||||
|
|
@ -85,89 +73,73 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Grid -->
|
||||
<div class="hidden md:grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Kiri Mobile, Tengah desktop -->
|
||||
<div class="md:col-span-1 md:order-2">
|
||||
<div class="rounded-lg overflow-hidden shadow-lg h-full transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 relative group">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent z-10"></div>
|
||||
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full object-cover h-full transition-transform duration-700 group-hover:scale-105">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 z-20 transition-all duration-300">
|
||||
<a href="#" class="block">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-orange-300 font-medium mb-1">Telusuri</p>
|
||||
<h3 class="font-bold text-2xl text-white mb-2">Penjemputan e-Waste</h3>
|
||||
<p class="text-white/80 text-sm max-w-xs hidden group-hover:block transition-all duration-300">
|
||||
Layanan pengumpulan sampah elektronik.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-orange-500 p-3 rounded-full transform transition-all duration-300 group-hover:bg-orange-600 group-hover:-rotate-45">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- kiri desktop, keduua on mobile -->
|
||||
<div class="flex flex-col gap-8 md:order-1">
|
||||
<div class="hidden md:block relative" id="services-container">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="three-column-layout">
|
||||
<div class="flex flex-col gap-8 md:order-1 transform transition-all duration-1000 ease-out" id="left-services">
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<div class="flex flex-row items-center mb-4">
|
||||
<div>
|
||||
<div class="bg-orange-600 w-2 h-16 mr-4 rounded-full hidden"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-400">Penjemputan e-Waste</h2>
|
||||
<p class="text-balance text-gray-400">Layanan pengumpulan sampah elektronik.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">Uji Sampel Laboratorium</h2>
|
||||
<p class="text-balance text-gray-400">Pengujian kualitas lingkungan hidup.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">Bus Toilet</h2>
|
||||
<p class="text-balance text-gray-400">Fasilitas toilet keliling untuk kegiatan umum.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">AMDAL</h2>
|
||||
<p class="text-balance text-gray-400">Proses Analisis Mengenai Dampak Lingkungan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- kanan desktop, ketiga mobile -->
|
||||
<div class="flex flex-col gap-8 md:order-3">
|
||||
<div class="md:col-span-1 md:order-2 transform transition-all duration-1000 ease-out" id="center-image-container">
|
||||
<div class="rounded-lg overflow-hidden shadow-lg h-full transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 relative group">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent z-10"></div>
|
||||
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full object-cover h-full aspect-square transition-transform duration-700 group-hover:scale-105" id="center-service-image">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 z-20 transition-all duration-300">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-orange-300 font-medium mb-1">Telusuri</p>
|
||||
<h3 class="font-bold text-2xl text-white mb-2" id="center-service-title">Penjemputan e-Waste</h3>
|
||||
<p class="text-white/80 text-sm max-w-xs hidden group-hover:block transition-all duration-300" id="center-service-description">
|
||||
Layanan pengumpulan sampah elektronik.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-oren p-3 rounded-full transform transition-all duration-300 group-hover:bg-orange-600 group-hover:-rotate-45">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-8 md:order-3 transform transition-all duration-1000 ease-out" id="right-services">
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">Bulky Waste</h2>
|
||||
<p class="text-balance text-gray-400">Layanan khusus pengangkutan sampah besar.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">Permohonan Informasi Publik</h2>
|
||||
<p class="text-balance text-gray-400">Saluran pengaduan pelanggaran lingkungan.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">BPS-RW</h2>
|
||||
<p class="text-balance text-gray-400">Basis data lingkungan hidup tingkat Rukun Warga</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col service-item cursor-pointer">
|
||||
<h2 class="text-2xl font-bold text-gray-400">Whistleblowing System</h2>
|
||||
<p class="text-balance text-gray-400">Sarana pelaporan pelanggaran terkait lingkungan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsLayanan">
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
|
@ -175,194 +147,159 @@
|
|||
|
||||
const serviceData = {
|
||||
"Penjemputan e-Waste": {
|
||||
image: asset("jemput.jpg"),
|
||||
description: "Layanan pengumpulan sampah elektronik.",
|
||||
image: asset("waste.jpg"),
|
||||
description: "Layanan pengumpulan sampah elektronik."
|
||||
},
|
||||
"Uji Sampel Laboratorium": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Pengujian kualitas lingkungan hidup.",
|
||||
description: "Pengujian kualitas lingkungan hidup."
|
||||
},
|
||||
"Bus Toilet": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Fasilitas toilet keliling untuk kegiatan umum.",
|
||||
image: asset("waste.jpg"),
|
||||
description: "Fasilitas toilet keliling untuk kegiatan umum."
|
||||
},
|
||||
AMDAL: {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Proses Analisis Mengenai Dampak Lingkungan.",
|
||||
"AMDAL": {
|
||||
image: asset("waste.jpg"),
|
||||
description: "Proses Analisis Mengenai Dampak Lingkungan."
|
||||
},
|
||||
"Bulky Waste": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Layanan khusus pengangkutan sampah besar.",
|
||||
image: asset("waste.jpg"),
|
||||
description: "Layanan khusus pengangkutan sampah besar."
|
||||
},
|
||||
"Permohonan Informasi Publik": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Saluran pengaduan pelanggaran lingkungan.",
|
||||
image: asset("waste.jpg"),
|
||||
description: "Saluran pengaduan pelanggaran lingkungan."
|
||||
},
|
||||
"BPS-RW": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Basis data lingkungan hidup tingkat Rukun Warga",
|
||||
image: asset("waste.jpg"),
|
||||
description: "Basis data lingkungan hidup tingkat Rukun Warga."
|
||||
},
|
||||
"Whistleblowing System": {
|
||||
image: asset("lab.jpg"),
|
||||
description: "Sarana pelaporan pelanggaran terkait lingkungan",
|
||||
},
|
||||
image: asset("waste.jpg"),
|
||||
description: "Sarana pelaporan pelanggaran terkait lingkungan."
|
||||
}
|
||||
};
|
||||
|
||||
const mobileTabs = document.querySelectorAll(".mobile-tab");
|
||||
const mobileServiceImage = document.getElementById("mobile-service-image");
|
||||
const mobileServiceTitle = document.getElementById("mobile-service-title");
|
||||
const mobileServiceDescription = document.getElementById(
|
||||
"mobile-service-description"
|
||||
);
|
||||
const mobileServiceDescription = document.getElementById("mobile-service-description");
|
||||
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.addEventListener("click", function () {
|
||||
const serviceName = this.getAttribute("data-service");
|
||||
|
||||
mobileTabs.forEach((t) => {
|
||||
t.classList.remove("bg-orange-500", "text-white");
|
||||
t.classList.remove("bg-oren", "text-white");
|
||||
t.classList.add("bg-gray-200", "text-gray-600");
|
||||
});
|
||||
|
||||
this.classList.remove("bg-gray-200", "text-gray-600");
|
||||
this.classList.add("bg-orange-500", "text-white");
|
||||
|
||||
this.classList.add("bg-oren", "text-white");
|
||||
if (serviceData[serviceName]) {
|
||||
mobileServiceImage.src = serviceData[serviceName].image;
|
||||
mobileServiceTitle.textContent = serviceName;
|
||||
mobileServiceDescription.textContent =
|
||||
serviceData[serviceName].description;
|
||||
mobileServiceDescription.textContent = serviceData[serviceName].description;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const leftServices = document.getElementById('left-services');
|
||||
const rightServices = document.getElementById('right-services');
|
||||
const centerImageContainer = document.getElementById('center-image-container');
|
||||
const centerImage = document.getElementById('center-service-image');
|
||||
const centerTitle = document.getElementById('center-service-title');
|
||||
const centerDescription = document.getElementById('center-service-description');
|
||||
|
||||
leftServices.style.transform = 'translateX(-100px)';
|
||||
leftServices.style.opacity = '0';
|
||||
rightServices.style.transform = 'translateX(100px)';
|
||||
rightServices.style.opacity = '0';
|
||||
centerImageContainer.style.transform = 'translateY(50px)';
|
||||
centerImageContainer.style.opacity = '0';
|
||||
|
||||
function startSequentialAnimation() {
|
||||
setTimeout(() => {
|
||||
leftServices.style.transform = 'translateX(0)';
|
||||
leftServices.style.opacity = '1';
|
||||
}, 200);
|
||||
setTimeout(() => {
|
||||
rightServices.style.transform = 'translateX(0)';
|
||||
rightServices.style.opacity = '1';
|
||||
}, 600);
|
||||
setTimeout(() => {
|
||||
centerImageContainer.style.transform = 'translateY(0)';
|
||||
centerImageContainer.style.opacity = '1';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.2,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
startSequentialAnimation();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
if (window.innerWidth >= 768) {
|
||||
observer.observe(document.getElementById('layanan-section'));
|
||||
}
|
||||
|
||||
const serviceItems = Array.from(document.querySelectorAll(".service-item"));
|
||||
const imageCard = document.querySelector(".md\\:col-span-1 .rounded-lg img");
|
||||
const serviceTitle = document.querySelector(
|
||||
".md\\:col-span-1 .rounded-lg h3"
|
||||
);
|
||||
const cardContainer = document.querySelector(".md\\:col-span-1 .rounded-lg");
|
||||
|
||||
let activeService = "Penjemputan e-Waste";
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.service-item {
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-left: 0px solid #ed8936;
|
||||
overflow: hidden;
|
||||
}
|
||||
.service-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background-color: rgba(237, 137, 54, 0.1);
|
||||
transition: width 0.3s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
.service-item.active::before {
|
||||
width: 100%;
|
||||
}
|
||||
.service-item h2, .service-item p {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.rounded-lg.overflow-hidden {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.rounded-lg.overflow-hidden:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.rounded-lg.overflow-hidden img {
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
.image-fade {
|
||||
animation: imageFade 0.4s ease-in-out;
|
||||
}
|
||||
@@keyframes imageFade {
|
||||
0% { opacity: 0.6; transform: scale(0.95); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
function setActiveService(title) {
|
||||
serviceItems.forEach((item) => {
|
||||
const h2 = item.querySelector("h2");
|
||||
const p = item.querySelector("p");
|
||||
if (!h2 || !p) return;
|
||||
|
||||
const serviceName = h2.textContent.trim();
|
||||
|
||||
if (serviceName === title) {
|
||||
item.classList.add("active");
|
||||
item.style.borderLeft = "4px solid #ed8936";
|
||||
item.style.paddingLeft = "1rem";
|
||||
|
||||
h2.classList.remove("text-gray-400");
|
||||
h2.classList.add("text-black", "font-bold");
|
||||
|
||||
p.classList.remove("text-gray-400");
|
||||
p.classList.add("text-gray-600");
|
||||
} else {
|
||||
item.classList.remove("active");
|
||||
item.style.borderLeft = "none";
|
||||
item.style.paddingLeft = "0";
|
||||
|
||||
h2.classList.add("text-gray-400");
|
||||
h2.classList.remove("text-black", "font-bold");
|
||||
|
||||
p.classList.add("text-gray-400");
|
||||
p.classList.remove("text-gray-600");
|
||||
}
|
||||
});
|
||||
|
||||
if (imageCard && serviceData[title]) {
|
||||
imageCard.classList.add("image-fade");
|
||||
imageCard.src = serviceData[title].image;
|
||||
imageCard.alt = title;
|
||||
setTimeout(() => imageCard.classList.remove("image-fade"), 400);
|
||||
}
|
||||
|
||||
if (serviceTitle) {
|
||||
serviceTitle.textContent = title;
|
||||
if (serviceData[title]) {
|
||||
centerImage.src = serviceData[title].image;
|
||||
centerImage.alt = title;
|
||||
centerTitle.textContent = title;
|
||||
centerDescription.textContent = serviceData[title].description;
|
||||
}
|
||||
|
||||
activeService = title;
|
||||
}
|
||||
|
||||
let autoplayInterval;
|
||||
let isHovering = false;
|
||||
|
||||
serviceItems.forEach((item) => {
|
||||
item.addEventListener("mouseenter", () => {
|
||||
isHovering = true;
|
||||
const h2 = item.querySelector("h2");
|
||||
if (!h2) return;
|
||||
const hoveredTitle = h2.textContent.trim();
|
||||
if (serviceData[hoveredTitle]) setActiveService(hoveredTitle);
|
||||
});
|
||||
|
||||
item.addEventListener("mouseleave", () => {
|
||||
isHovering = false;
|
||||
});
|
||||
});
|
||||
|
||||
if (cardContainer) {
|
||||
cardContainer.addEventListener("mouseenter", () => {
|
||||
if (imageCard) imageCard.style.transform = "scale(1.05)";
|
||||
});
|
||||
|
||||
cardContainer.addEventListener("mouseleave", () => {
|
||||
if (imageCard) imageCard.style.transform = "scale(1)";
|
||||
});
|
||||
}
|
||||
|
||||
let autoplayInterval;
|
||||
let isHovering = false;
|
||||
@*
|
||||
function startAutoplay() {
|
||||
autoplayInterval = setInterval(() => {
|
||||
if (!isHovering) {
|
||||
|
|
@ -371,12 +308,28 @@
|
|||
const nextIndex = (currentIndex + 1) % serviceNames.length;
|
||||
setActiveService(serviceNames[nextIndex]);
|
||||
}
|
||||
}, 4000);
|
||||
}
|
||||
}, 6000);
|
||||
} *@
|
||||
|
||||
serviceItems.forEach((item) => {
|
||||
item.addEventListener("mouseenter", () => { isHovering = true; });
|
||||
item.addEventListener("mouseleave", () => { isHovering = false; });
|
||||
});
|
||||
|
||||
setActiveService(activeService);
|
||||
startAutoplay();
|
||||
});
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
.service-item {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
#left-services, #right-services, #center-image-container {
|
||||
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<div class="container max-w-6xl mx-auto py-20 px-4">
|
||||
<div class="flex flex-col md:flex-row items-center md:items-start gap-10">
|
||||
<!-- Left column -->
|
||||
<div class="md:w-1/3 md:sticky md:top-24 md:self-start" data-aos="fade-right" data-aos-duration="800">
|
||||
<div class="inline-flex items-center bg-oren text-white px-5 py-2 rounded-full shadow-md mb-6">
|
||||
<i class="w-5 h-5 mr-2 text-white" data-lucide="medal"></i>
|
||||
<h2 class="text-sm font-semibold">MITRA KAMI</h2>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">Mitra of The Year</h3>
|
||||
|
||||
<p class="text-gray-600 text-balance mb-8">
|
||||
Mitra terpilih yang telah memberikan kontribusi luar biasa dan bantuan berkelanjutan dalam mendukung program-program Dinas Lingkungan Hidup DKI Jakarta.
|
||||
</p>
|
||||
|
||||
<div class="flex space-x-3 mb-8 md:mb-0">
|
||||
<button id="prev-mitra-btn" class="p-2 rounded-full border border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-colors duration-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button id="next-mitra-btn" class="p-2 rounded-full border border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-colors duration-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dots indicator -->
|
||||
<div class="flex items-center space-x-1.5 ml-4" id="mitra-dots">
|
||||
<!-- Dots will be created dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right column: Mitra cards slider -->
|
||||
<div class="md:w-2/3 relative" data-aos="fade-left" data-aos-duration="1000">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex transition-all duration-500 ease-out" id="slider-mitra">
|
||||
<!-- Rows of mitra cards will be rendered here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsMitra">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mitra data
|
||||
const mitraData = [
|
||||
{
|
||||
name: "PT. Mitra Sejahtera",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "150+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
},
|
||||
{
|
||||
name: "CV. Media Partner",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "80+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
},
|
||||
{
|
||||
name: "PT. Teknologi Maju",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "20+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
},
|
||||
{
|
||||
name: "PT. Eco Solutions",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "50+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
},
|
||||
{
|
||||
name: "PT. Green Energy",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "95+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
},
|
||||
{
|
||||
name: "CV. Sustainable Future",
|
||||
logo: "@Url.Content("~/assets/images/home/pertamina-retail.png")",
|
||||
contributions: "65+ bantuan",
|
||||
contributionColor: "text-ijo"
|
||||
}
|
||||
];
|
||||
|
||||
// Configuration
|
||||
const isMobile = window.innerWidth < 768;
|
||||
const cardsPerSlide = isMobile ? 1 : 3; // Show 1 card on mobile, 3 on desktop
|
||||
const slider = document.getElementById('slider-mitra');
|
||||
const dotsContainer = document.getElementById('mitra-dots');
|
||||
const nextBtn = document.getElementById('next-mitra-btn');
|
||||
const prevBtn = document.getElementById('prev-mitra-btn');
|
||||
|
||||
// Calculate how many slides we need
|
||||
const totalSlides = Math.ceil(mitraData.length / cardsPerSlide);
|
||||
|
||||
// Generate slides with horizontal logos
|
||||
for (let i = 0; i < totalSlides; i++) {
|
||||
const slideDiv = document.createElement('div');
|
||||
slideDiv.className = 'flex-shrink-0 w-full';
|
||||
|
||||
// Create a flex container for horizontal layout
|
||||
const flexContainer = document.createElement('div');
|
||||
// Add gap-2 for mobile to prevent overflow
|
||||
flexContainer.className = `flex flex-row justify-between ${isMobile ? 'gap-2' : 'gap-6'}`;
|
||||
|
||||
// Get mitras for this slide
|
||||
const startIndex = i * cardsPerSlide;
|
||||
const slideMitras = mitraData.slice(startIndex, startIndex + cardsPerSlide);
|
||||
|
||||
// Create cards for this slide
|
||||
slideMitras.forEach(mitra => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'mitra-card bg-white rounded-xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex-1';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="text-center">
|
||||
<img src="${mitra.logo}" alt="${mitra.name}" class="w-24 h-24 mx-auto object-contain mb-4 rounded-lg">
|
||||
<h3 class="font-bold text-gray-800 text-sm">${mitra.name}</h3>
|
||||
<div class="bg-orange-100 text-orange-800 text-xs font-medium px-2 py-0.5 rounded-full inline-block my-2">
|
||||
Mitra of the Year
|
||||
</div>
|
||||
<p class="text-gray-600 text-xs leading-relaxed">
|
||||
<span class="font-semibold ${mitra.contributionColor}">${mitra.contributions}</span>
|
||||
</p>
|
||||
<button class="mt-3 text-orange-600 hover:text-orange-800 text-xs font-medium flex items-center justify-center mx-auto transition-colors duration-300">
|
||||
Telusuri
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
flexContainer.appendChild(card);
|
||||
});
|
||||
|
||||
// If we have fewer than cardsPerSlide, add empty placeholders to maintain layout
|
||||
if (slideMitras.length < cardsPerSlide) {
|
||||
for (let j = slideMitras.length; j < cardsPerSlide; j++) {
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'flex-1';
|
||||
flexContainer.appendChild(placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
slideDiv.appendChild(flexContainer);
|
||||
slider.appendChild(slideDiv);
|
||||
}
|
||||
|
||||
// Create navigation dots
|
||||
for (let i = 0; i < totalSlides; i++) {
|
||||
const dot = document.createElement('button');
|
||||
dot.className = `w-2 h-2 rounded-full transition-all duration-300 ${i === 0 ? 'bg-oren w-6' : 'bg-gray-300'}`;
|
||||
dot.setAttribute('data-index', i);
|
||||
dot.onclick = () => goToSlide(i);
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
|
||||
// Slider functionality
|
||||
let currentSlide = 0;
|
||||
|
||||
function goToSlide(index) {
|
||||
if (index < 0 || index >= totalSlides || index === currentSlide) return;
|
||||
|
||||
// Use GSAP for smooth animation
|
||||
gsap.to(slider, {
|
||||
x: `-${index * 100}%`,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
});
|
||||
|
||||
currentSlide = index;
|
||||
updateDots();
|
||||
updateButtons();
|
||||
}
|
||||
|
||||
function updateDots() {
|
||||
const dots = dotsContainer.querySelectorAll('button');
|
||||
dots.forEach((dot, index) => {
|
||||
if (index === currentSlide) {
|
||||
dot.classList.add('bg-orange-600', 'w-6');
|
||||
dot.classList.remove('bg-gray-300');
|
||||
} else {
|
||||
dot.classList.add('bg-gray-300');
|
||||
dot.classList.remove('bg-orange-600', 'w-6');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateButtons() {
|
||||
prevBtn.disabled = currentSlide === 0;
|
||||
nextBtn.disabled = currentSlide === totalSlides - 1;
|
||||
|
||||
prevBtn.style.opacity = currentSlide === 0 ? '0.5' : '1';
|
||||
nextBtn.style.opacity = currentSlide === totalSlides - 1 ? '0.5' : '1';
|
||||
}
|
||||
|
||||
// Navigation
|
||||
nextBtn.addEventListener('click', () => {
|
||||
goToSlide(currentSlide + 1);
|
||||
});
|
||||
|
||||
prevBtn.addEventListener('click', () => {
|
||||
goToSlide(currentSlide - 1);
|
||||
});
|
||||
|
||||
// Handle window resize to adjust for orientation changes
|
||||
window.addEventListener('resize', function() {
|
||||
// Recalculate isMobile
|
||||
const wasMobile = isMobile;
|
||||
const newIsMobile = window.innerWidth < 768;
|
||||
|
||||
// If mobile state changed, reload the page to rebuild the carousel
|
||||
if (wasMobile !== newIsMobile) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
// Add touch swipe support for mobile
|
||||
if (isMobile) {
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
slider.addEventListener('touchstart', function(e) {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
}, {passive: true});
|
||||
|
||||
slider.addEventListener('touchend', function(e) {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
handleSwipe();
|
||||
}, {passive: true});
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) {
|
||||
// Swipe left - go to next slide
|
||||
goToSlide(currentSlide + 1);
|
||||
}
|
||||
if (touchEndX > touchStartX + 50) {
|
||||
// Swipe right - go to previous slide
|
||||
goToSlide(currentSlide - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add card entrance animation
|
||||
const cards = document.querySelectorAll('.mitra-card');
|
||||
gsap.fromTo(cards,
|
||||
{ y: 30, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
stagger: 0.1,
|
||||
ease: "power2.out",
|
||||
delay: 0.3
|
||||
}
|
||||
);
|
||||
|
||||
// Initialize buttons state
|
||||
updateButtons();
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -1,152 +1,355 @@
|
|||
<div class="relative min-h-screen overflow-hidden md:pt-12">
|
||||
<!-- Enhanced Animated Background Elements -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-100">
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-[0.03]"></div>
|
||||
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
|
||||
<div class="blob blob-1 absolute top-[10%] right-[15%] w-[40vw] h-[40vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow opacity-15 bg-gradient-to-br from-green-300 to-emerald-400"></div>
|
||||
<div class="blob blob-2 absolute bottom-[5%] left-[20%] w-[35vw] h-[35vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-2000 opacity-15 bg-gradient-to-br from-amber-300 to-orange-400"></div>
|
||||
<div class="blob blob-3 absolute top-[30%] left-[10%] w-[30vw] h-[30vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-4000 opacity-15 bg-gradient-to-tr from-green-400 to-teal-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Content - Enhanced -->
|
||||
<div class="container mx-auto px-4 items-center text-center relative z-10">
|
||||
<div class="animate-fade-in" style="animation-delay: 0.2s">
|
||||
<span class="inline-flex items-center rounded-full bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-1.5 text-xs md:text-sm font-medium text-ijo ring-1 ring-green-600/20 ring-inset my-4 shadow-sm transition-transform duration-300 hover:scale-105">
|
||||
<span class="mr-2 bg-green-500 rounded-full w-1.5 h-1.5 animate-pulse"></span>
|
||||
Selamat Datang di ✨
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl sm:text-4xl md:text-6xl font-extrabold animate-fade-in" style="animation-delay: 0.4s">
|
||||
<span class="text-oren">Website Resmi</span>
|
||||
</h2>
|
||||
|
||||
<div class="h-16 sm:h-16 md:h-24 flex items-center justify-center overflow-hidden animate-fade-in" style="animation-delay: 0.6s">
|
||||
<span id="typing-text" class="bg-oren bg-clip-text text-transparent text-2xl md:text-4xl lg:text-5xl font-bold"></span>
|
||||
<span id="cursor" class="text-2xl md:text-4xl lg:text-5xl font-bold animate-blink text-oren">|</span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed mt-2 animate-fade-in" style="animation-delay: 0.8s">
|
||||
Jelajahi berbagai layanan untuk menjaga kebersihan dan kelestarian lingkungan DKI Jakarta.
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Service Cards - Enhanced -->
|
||||
<div class="select-none w-full flex items-center justify-center py-8 overflow-x-hidden max-w-6xl mx-auto">
|
||||
<div class="w-full text-center whitespace-nowrap flex flex-col md:flex-row items-center md:items-stretch justify-center gap-4 md:gap-6 px-4">
|
||||
@* Item 1 *@
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2xl"></div>
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
||||
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">DLH</h3>
|
||||
<div class="w-full text-center flex flex-col md:flex-row items-center justify-center gap-5 px-4">
|
||||
<!-- Item 1 - DLH -->
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
|
||||
<!-- Subtle border with glow effect -->
|
||||
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
||||
|
||||
<!-- Enhanced gradient overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent rounded-b-2xl"></div>
|
||||
|
||||
<!-- Content cover with better backdrop blur -->
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
||||
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">DLH</h3>
|
||||
</div>
|
||||
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
||||
|
||||
<!-- Status indicator dot -->
|
||||
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
||||
|
||||
<!-- Enhanced action button with subtle shine effect -->
|
||||
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
||||
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
||||
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
||||
<span class="relative z-10">Telusuri</span>
|
||||
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Item 2 *@
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=800&q=60')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
||||
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">BPS-RW</h3>
|
||||
<!-- Item 2 - BPS-RW -->
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=800&q=60')">
|
||||
<!-- Subtle border with glow effect -->
|
||||
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
||||
|
||||
<!-- Enhanced gradient overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent rounded-b-2xl"></div>
|
||||
|
||||
<!-- Content cover with better backdrop blur -->
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
||||
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">BPS-RW</h3>
|
||||
</div>
|
||||
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
||||
|
||||
<!-- Status indicator dot -->
|
||||
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
||||
|
||||
<!-- Enhanced action button with subtle shine effect -->
|
||||
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
||||
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
||||
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
||||
<span class="relative z-10">Telusuri</span>
|
||||
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Item 3 *@
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=800&q=60')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
|
||||
<h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">AMDAL</h3>
|
||||
<!-- Item 3 - AMDAL -->
|
||||
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=800&q=60')">
|
||||
<!-- Subtle border with glow effect -->
|
||||
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
||||
|
||||
<!-- Enhanced gradient overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent rounded-b-2xl"></div>
|
||||
|
||||
<!-- Content cover with better backdrop blur -->
|
||||
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
||||
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">AMDAL</h3>
|
||||
</div>
|
||||
<div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
|
||||
|
||||
<!-- Status indicator dot -->
|
||||
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
||||
|
||||
<!-- Enhanced action button with subtle shine effect -->
|
||||
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
||||
<a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
|
||||
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
||||
<span class="relative z-10">Telusuri</span>
|
||||
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute left-1/2 bottom-4 transform -translate-x-1/2 opacity-70 animate-bounce hidden md:flex flex-col items-center">
|
||||
<span class="text-sm text-gray-500">Scroll</span>
|
||||
<i class="w-4 h-4 text-gray-500" data-lucide="chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<register-block dynamic-section="css" key="cssSlider">
|
||||
<style>
|
||||
/* Animation keyframes */
|
||||
@@keyframes fade-in {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@@keyframes blob-slow {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(20px, -15px) scale(1.05); }
|
||||
50% { transform: translate(0, 15px) scale(0.95); }
|
||||
75% { transform: translate(-20px, -5px) scale(1.05); }
|
||||
}
|
||||
|
||||
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
|
||||
.animate-blink { animation: blink 1s step-end infinite; }
|
||||
.animate-blob-slow { animation: blob-slow 20s ease-in-out infinite; }
|
||||
|
||||
.animation-delay-2000 { animation-delay: 2s; }
|
||||
.animation-delay-4000 { animation-delay: 4s; }
|
||||
|
||||
/* Grid background */
|
||||
.bg-grid-pattern {
|
||||
background-image: radial-gradient(circle, #000 0.5px, transparent 0.5px);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsSlider">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script>
|
||||
// GSAP logic as received
|
||||
// GSAP enhanced animations
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const items = document.querySelectorAll(".item");
|
||||
const covers = document.querySelectorAll(".cover");
|
||||
const actionButtons = document.querySelectorAll(".action-button");
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
|
||||
// Enhanced expand function with smoother animations
|
||||
const expand = (item, i) => {
|
||||
const cover = item.querySelector(".cover");
|
||||
const button = item.querySelector(".action-button");
|
||||
const title = item.querySelector(".title");
|
||||
|
||||
// Reset other items
|
||||
items.forEach((it, ind) => {
|
||||
if (i === ind) return;
|
||||
it.clicked = false;
|
||||
const otherCover = it.querySelector(".cover");
|
||||
const otherButton = it.querySelector(".action-button");
|
||||
const otherTitle = it.querySelector(".title");
|
||||
|
||||
gsap.to(otherCover, { opacity: 1, duration: 0.8, ease: "power2.out" });
|
||||
gsap.to(otherButton, {
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
duration: 0.5,
|
||||
ease: "power2.out",
|
||||
gsap.to(otherCover, { opacity: 1, backdropFilter: "blur(5px)", duration: 0.6, ease: "power2.out" });
|
||||
gsap.to(otherButton, { opacity: 0, y: 20, duration: 0.4, ease: "power2.out" });
|
||||
gsap.to(otherTitle, { scale: 1, opacity: 1, duration: 0.4, rotation: isMobile ? 0 : -90, ease: "power2.out" });
|
||||
gsap.to(it, {
|
||||
scale: 1,
|
||||
rotationY: 0,
|
||||
boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
});
|
||||
gsap.to(it, { scale: 1, rotationY: 0, duration: 0.8, ease: "power2.out" });
|
||||
});
|
||||
|
||||
// Mobile animations
|
||||
if (isMobile) {
|
||||
gsap.to(items, {
|
||||
height: item.clicked ? "18vh" : "12vh",
|
||||
duration: 1.5,
|
||||
duration: 1.3,
|
||||
ease: "elastic(1, .6)",
|
||||
});
|
||||
|
||||
item.clicked = !item.clicked;
|
||||
gsap.to(item, {
|
||||
height: item.clicked ? "35vh" : "18vh",
|
||||
duration: 2,
|
||||
height: item.clicked ? "38vh" : "18vh",
|
||||
duration: 1.6,
|
||||
ease: "elastic(1, .3)",
|
||||
scale: item.clicked ? 1.02 : 1,
|
||||
scale: item.clicked ? 1 : 1,
|
||||
boxShadow: item.clicked ?
|
||||
"0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 255, 255, 0.2)" :
|
||||
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
|
||||
});
|
||||
} else {
|
||||
}
|
||||
// Desktop animations
|
||||
else {
|
||||
gsap.to(items, {
|
||||
width: item.clicked ? "18vw" : "12vw",
|
||||
duration: 2,
|
||||
width: item.clicked ? "calc(25% - 1rem)" : "calc(25% - 1rem)",
|
||||
duration: 1.6,
|
||||
ease: "elastic(1, .6)",
|
||||
});
|
||||
|
||||
item.clicked = !item.clicked;
|
||||
gsap.to(item, {
|
||||
width: item.clicked ? "48vw" : "18vw",
|
||||
duration: 2.5,
|
||||
width: item.clicked ? "calc(50% - 1rem)" : "calc(33.333% - 1rem)",
|
||||
duration: 1.8,
|
||||
ease: "elastic(1, .3)",
|
||||
scale: item.clicked ? 1.05 : 1,
|
||||
scale: item.clicked ? 1 : 1,
|
||||
rotationY: item.clicked ? 5 : 0,
|
||||
});
|
||||
}
|
||||
|
||||
// Content animations
|
||||
gsap.to(cover, {
|
||||
opacity: item.clicked ? 0.3 : 1,
|
||||
backdropFilter: item.clicked ? "blur(0px)" : "blur(5px)",
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
});
|
||||
|
||||
gsap.to(title, {
|
||||
opacity: item.clicked ? 0 : 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
scale: item.clicked ? 0.8 : 1,
|
||||
duration: 0.4,
|
||||
ease: "power2.out"
|
||||
});
|
||||
|
||||
gsap.to(button, {
|
||||
opacity: item.clicked ? 1 : 0,
|
||||
y: item.clicked ? 0 : 20,
|
||||
duration: item.clicked ? 0.8 : 0.5,
|
||||
delay: item.clicked ? 0.3 : 0,
|
||||
ease: "power2.out",
|
||||
duration: item.clicked ? 0.6 : 0.4,
|
||||
delay: item.clicked ? 0.2 : 0,
|
||||
ease: "power2.out"
|
||||
});
|
||||
};
|
||||
|
||||
// Enhanced hover effects
|
||||
items.forEach((item, i) => {
|
||||
item.clicked = false;
|
||||
|
||||
item.addEventListener("click", (e) => {
|
||||
if (!e.target.closest(".action-button")) expand(item, i);
|
||||
});
|
||||
|
||||
item.addEventListener("mouseenter", () => {
|
||||
if (!item.clicked) {
|
||||
gsap.to(item, { scale: 1.03, duration: 0.3, ease: "power2.out" });
|
||||
gsap.to(item, {
|
||||
scale: 1.03,
|
||||
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 15px rgba(255, 255, 255, 0.1)",
|
||||
duration: 0.4,
|
||||
ease: "power2.out"
|
||||
});
|
||||
|
||||
const title = item.querySelector(".title");
|
||||
gsap.to(title, { scale: 1.1, duration: 0.4, ease: "power2.out" });
|
||||
}
|
||||
});
|
||||
|
||||
item.addEventListener("mouseleave", () => {
|
||||
if (!item.clicked) {
|
||||
gsap.to(item, { scale: 1, duration: 0.3, ease: "power2.out" });
|
||||
gsap.to(item, {
|
||||
scale: 1,
|
||||
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||
duration: 0.4,
|
||||
ease: "power2.out"
|
||||
});
|
||||
|
||||
const title = item.querySelector(".title");
|
||||
gsap.to(title, { scale: 1, duration: 0.4, ease: "power2.out" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Enhanced entrance animations
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, y: 50, scale: 0.8 },
|
||||
{ opacity: 0, y: 50, scale: 0.9 },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: 1,
|
||||
stagger: 0.2,
|
||||
duration: 1.2,
|
||||
stagger: 0.25,
|
||||
ease: "back.out(1.7)",
|
||||
delay: 0.8
|
||||
}
|
||||
);
|
||||
|
||||
setTimeout(() => expand(items[0], 0), 1200);
|
||||
// Auto-expand first item with delay
|
||||
setTimeout(() => expand(items[0], 0), 1500);
|
||||
});
|
||||
|
||||
// Enhanced typing animation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const texts = ['Dinas Lingkungan Hidup DKI Jakarta'];
|
||||
let textIndex = 0;
|
||||
let charIndex = 0;
|
||||
let isDeleting = false;
|
||||
let typingSpeed = 80;
|
||||
|
||||
const typingElement = document.getElementById('typing-text');
|
||||
const cursorElement = document.getElementById('cursor');
|
||||
|
||||
function typeWriter() {
|
||||
const currentText = texts[textIndex];
|
||||
|
||||
if (isDeleting) {
|
||||
typingElement.textContent = currentText.substring(0, charIndex - 1);
|
||||
charIndex--;
|
||||
typingSpeed = 40;
|
||||
} else {
|
||||
typingElement.textContent = currentText.substring(0, charIndex + 1);
|
||||
charIndex++;
|
||||
typingSpeed = 80;
|
||||
}
|
||||
|
||||
if (!isDeleting && charIndex === currentText.length) {
|
||||
setTimeout(() => {
|
||||
isDeleting = true;
|
||||
}, 2000);
|
||||
} else if (isDeleting && charIndex === 0) {
|
||||
isDeleting = false;
|
||||
textIndex = (textIndex + 1) % texts.length;
|
||||
setTimeout(() => {
|
||||
typeWriter();
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(typeWriter, typingSpeed);
|
||||
}
|
||||
|
||||
// Start typing animation with slight delay
|
||||
setTimeout(typeWriter, 800);
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -0,0 +1,432 @@
|
|||
<div class="relative min-h-screen overflow-hidden perspective-container">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-gray-100">
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-[0.03]"></div>
|
||||
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
|
||||
<div class="blob blob-1 absolute top-[10%] right-[15%] w-[40vw] h-[40vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow opacity-20 bg-green-300"></div>
|
||||
<div class="blob blob-2 absolute bottom-[5%] left-[20%] w-[35vw] h-[35vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-2000 opacity-20 bg-amber-300"></div>
|
||||
<div class="blob blob-3 absolute top-[30%] left-[10%] w-[30vw] h-[30vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-4000 opacity-20 bg-green-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Content -->
|
||||
<div class="container mx-auto px-4 pt-24 pb-12 md:pt-28 md:pb-16 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center mb-6">
|
||||
<div class="flex justify-center mb-4 animate-fade-in-up" style="animation-delay: 0.2s">
|
||||
<div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-green-50 to-emerald-50 shadow-sm border border-green-100 group hover:shadow-md transition-all duration-300">
|
||||
<div class="w-2 h-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 mr-2 animate-pulse"></div>
|
||||
<span class="text-xs md:text-sm bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent font-semibold tracking-wider group-hover:tracking-widest transition-all duration-300">SELAMAT DATANG DI ✨</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="relative inline-block animate-fade-in-up" style="animation-delay: 0.4s">
|
||||
<span class="text-4xl md:text-6xl lg:text-7xl font-extrabold bg-gradient-to-br from-orange-500 via-amber-500 to-orange-600 bg-clip-text text-transparent leading-tight">Website Resmi</span>
|
||||
<div class="absolute -top-6 -right-6 w-16 h-16 text-amber-500 opacity-30 rotate-12 scale-75 md:scale-100">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 17L6.12199 20.5902L7.84752 13.8906L2.31643 9.40983L9.13801 8.80902L12 2.5L14.862 8.80902L21.6836 9.40983L16.1525 13.8906L17.878 20.5902L12 17Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div class="h-16 sm:h-20 md:h-24 flex items-center justify-center overflow-hidden animate-fade-in-up" style="animation-delay: 0.6s">
|
||||
<span id="typing-text" class="text-2xl md:text-4xl lg:text-5xl font-bold text-gray-800"></span>
|
||||
<span id="cursor" class="text-2xl md:text-4xl lg:text-5xl font-bold animate-blink text-gray-800">|</span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed mt-6 animate-fade-in-up" style="animation-delay: 0.8s">
|
||||
Temukan layanan inovatif dan informasi terkini untuk menjaga kebersihan dan kelestarian lingkungan DKI Jakarta.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Indicator -->
|
||||
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex flex-col items-center opacity-80 animate-bounce-slow">
|
||||
<span class="text-xs text-gray-600 mb-2">Scroll</span>
|
||||
<svg class="w-5 h-5 text-oren" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Cards Container -->
|
||||
<div class="relative max-w-7xl mx-auto px-4 pb-20 md:pb-32">
|
||||
<div class="cards-container flex flex-col md:flex-row gap-6 md:gap-4 items-center justify-center">
|
||||
<!-- Card 1: DLH -->
|
||||
<div class="card-wrapper w-full md:w-1/3 perspective">
|
||||
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
||||
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
||||
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Utama</span>
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-white mb-2">Dinas Lingkungan Hidup</h3>
|
||||
<p class="text-white/80 text-sm">Pengelolaan dan perlindungan lingkungan hidup untuk kualitas hidup yang lebih baik.</p>
|
||||
<div class="card-stats flex mt-4 gap-4">
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">52+</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Program</span>
|
||||
</div>
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">1.2K+</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Pengguna</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-green-700 to-green-900 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-2">DLH DKI Jakarta</h3>
|
||||
<p class="text-sm text-white/80 mb-4">Bertugas melaksanakan pengelolaan dan perlindungan lingkungan hidup di DKI Jakarta.</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Pengujian kualitas lingkungan</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Pengelolaan pertamanan</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-green-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Pengawasan lingkungan</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
||||
Jelajahi Layanan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: BPS-RW -->
|
||||
<div class="card-wrapper w-full md:w-1/3 perspective">
|
||||
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
||||
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
||||
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=800&q=60')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Kebersihan</span>
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-white mb-2">Bank Sampah RW</h3>
|
||||
<p class="text-white/80 text-sm">Pengelolaan sampah masyarakat dengan prinsip ekonomi sirkuler.</p>
|
||||
<div class="card-stats flex mt-4 gap-4">
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">325+</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Bank Sampah</span>
|
||||
</div>
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">4.5K+</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Nasabah</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-600 to-amber-800 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-2">Bank Sampah RW</h3>
|
||||
<p class="text-sm text-white/80 mb-4">Pengelolaan sampah berbasis masyarakat untuk ekonomi sirkuler yang berkelanjutan.</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Pemilahan sampah</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Penghasilan tambahan warga</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-amber-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Mengurangi limbah ke TPA</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
||||
Jelajahi Layanan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: AMDAL -->
|
||||
<div class="card-wrapper w-full md:w-1/3 perspective">
|
||||
<div class="card-3d relative h-80 md:h-[450px] cursor-pointer group transform-gpu transition-all duration-700">
|
||||
<div class="card-face card-front absolute inset-0 rounded-2xl overflow-hidden">
|
||||
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=800&q=60')">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/60 to-transparent"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-between z-10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-xs font-semibold bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white border border-white/30">Layanan Perizinan</span>
|
||||
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold text-white mb-2">AMDAL</h3>
|
||||
<p class="text-white/80 text-sm">Analisis mengenai dampak lingkungan hidup untuk usaha dan kegiatan.</p>
|
||||
<div class="card-stats flex mt-4 gap-4">
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">180+</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Perusahaan</span>
|
||||
</div>
|
||||
<div class="stat text-white/90">
|
||||
<span class="block text-lg font-bold">95%</span>
|
||||
<span class="text-xs uppercase tracking-wide text-white/70">Kepuasan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-face card-back absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-700 to-blue-900 text-white transform-gpu rotateY-180 p-6 flex flex-col justify-between opacity-0">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-2">Layanan AMDAL</h3>
|
||||
<p class="text-sm text-white/80 mb-4">Analisis Mengenai Dampak Lingkungan untuk pembangunan berkelanjutan.</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Kajian lingkungan terperinci</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Perizinan usaha dan/atau kegiatan</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-300 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Monitoring dampak lingkungan</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a href="#" class="block w-full py-3 px-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg text-center font-medium transition-all">
|
||||
Jelajahi Layanan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<register-block dynamic-section="css" key="cssSlider">
|
||||
<style>
|
||||
/* Animations */
|
||||
@@keyframes fade-in-up {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@@keyframes bounce-slow {
|
||||
0%, 100% { transform: translateY(0) translateX(-50%); }
|
||||
50% { transform: translateY(-10px) translateX(-50%); }
|
||||
}
|
||||
|
||||
@@keyframes blob-slow {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(20px, -15px) scale(1.05); }
|
||||
50% { transform: translate(0, 15px) scale(0.95); }
|
||||
75% { transform: translate(-20px, -5px) scale(1.05); }
|
||||
}
|
||||
|
||||
.animation-delay-2000 { animation-delay: 2s; }
|
||||
.animation-delay-4000 { animation-delay: 4s; }
|
||||
|
||||
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
|
||||
.animate-blink { animation: blink 1s step-end infinite; }
|
||||
.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }
|
||||
.animate-blob-slow { animation: blob-slow 10s ease-in-out infinite; }
|
||||
|
||||
/* 3D Card Styling */
|
||||
.perspective { perspective: 2000px; }
|
||||
|
||||
.card-3d {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-3d:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.card-face {
|
||||
backface-visibility: hidden;
|
||||
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* Card interactive states */
|
||||
.card-wrapper:hover .card-3d {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-wrapper:hover .card-front {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-wrapper:hover .card-back {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Grid background */
|
||||
.bg-grid-pattern {
|
||||
background-image: radial-gradient(circle, #000 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
/* Responsive design enhancements */
|
||||
@@media (max-width: 768px) {
|
||||
.cards-container {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsSlider">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const texts = ['Dinas Lingkungan Hidup DKI Jakarta'];
|
||||
let textIndex = 0;
|
||||
let charIndex = 0;
|
||||
let isDeleting = false;
|
||||
let typingSpeed = 80;
|
||||
|
||||
const typingElement = document.getElementById('typing-text');
|
||||
const cursorElement = document.getElementById('cursor');
|
||||
|
||||
function typeWriter() {
|
||||
const currentText = texts[textIndex];
|
||||
|
||||
if (isDeleting) {
|
||||
typingElement.textContent = currentText.substring(0, charIndex - 1);
|
||||
charIndex--;
|
||||
typingSpeed = 40;
|
||||
} else {
|
||||
typingElement.textContent = currentText.substring(0, charIndex + 1);
|
||||
charIndex++;
|
||||
typingSpeed = 80;
|
||||
}
|
||||
|
||||
if (!isDeleting && charIndex === currentText.length) {
|
||||
setTimeout(() => {
|
||||
isDeleting = true;
|
||||
}, 2500);
|
||||
} else if (isDeleting && charIndex === 0) {
|
||||
isDeleting = false;
|
||||
textIndex = (textIndex + 1) % texts.length;
|
||||
setTimeout(() => {
|
||||
typeWriter();
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(typeWriter, typingSpeed);
|
||||
}
|
||||
|
||||
// Start typing animation
|
||||
setTimeout(typeWriter, 1000);
|
||||
|
||||
// Parallax effect for cards
|
||||
const cards = document.querySelectorAll('.card-3d');
|
||||
const cardWrappers = document.querySelectorAll('.card-wrapper');
|
||||
|
||||
cardWrappers.forEach(wrapper => {
|
||||
const card = wrapper.querySelector('.card-3d');
|
||||
|
||||
wrapper.addEventListener('mousemove', (e) => {
|
||||
const rect = wrapper.getBoundingClientRect();
|
||||
const centerX = (rect.left + rect.right) / 2;
|
||||
const centerY = (rect.top + rect.bottom) / 2;
|
||||
const posX = e.clientX - centerX;
|
||||
const posY = e.clientY - centerY;
|
||||
|
||||
// Calculate rotation based on mouse position
|
||||
const rotateY = (posX / rect.width) * 5;
|
||||
const rotateX = (posY / rect.height) * -5;
|
||||
|
||||
gsap.to(card, {
|
||||
rotateX: rotateX,
|
||||
rotateY: rotateY,
|
||||
duration: 0.5,
|
||||
ease: 'power1.out'
|
||||
});
|
||||
});
|
||||
|
||||
wrapper.addEventListener('mouseleave', () => {
|
||||
gsap.to(card, {
|
||||
rotateX: 0,
|
||||
rotateY: 0,
|
||||
duration: 0.8,
|
||||
ease: 'elastic.out(1, 0.5)'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Animate cards on load
|
||||
gsap.fromTo(cards,
|
||||
{ y: 100, opacity: 0, rotateX: 15 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
rotateX: 0,
|
||||
stagger: 0.15,
|
||||
duration: 1.2,
|
||||
ease: 'back.out(1.5)',
|
||||
delay: 0.5
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -1,59 +1,148 @@
|
|||
<section class="relative w-full py-8 px-6 my-12">
|
||||
<div class="absolute top-0 left-0 h-[600px] md:h-full w-full md:w-1/3 bg-orange-500 rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
|
||||
|
||||
<div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 gap-6 items-center relative">
|
||||
<section class="relative w-full px-4 sm:px-6 mb-8">
|
||||
<div class="absolute top-0 left-0 h-[400px] sm:h-[400px] md:h-full w-full md:w-1/3 bg-oren rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
|
||||
|
||||
<div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-8 items-center relative pt-12 md:pt-0">
|
||||
<!-- Left Content -->
|
||||
<div class="text-white md:p-6 rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-center">
|
||||
<div class="text-white rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-end md:pt-16 px-4 md:px-0">
|
||||
<div>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center md:text-left">Social Media</h2>
|
||||
<p class="text-lg mb-8 text-center md:text-left">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6 text-center md:text-left">Social Media</h2>
|
||||
<p class="text-base sm:text-lg mb-6 sm:mb-8 text-center md:text-left max-w-md mx-auto md:mx-0">
|
||||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="w-full flex justify-center md:justify-start">
|
||||
<img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-full h-auto">
|
||||
<!-- Pancoran -->
|
||||
<div class="w-full flex justify-center md:justify-start hidden md:block">
|
||||
<img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-[200px] md:max-w-full h-auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Content - Social Media Posts Grid -->
|
||||
<div class="col-span-4 grid grid-cols-1 md:grid-cols-4 gap-6 relative z-10">
|
||||
<!-- Right Content -->
|
||||
<div class="col-span-4 w-full">
|
||||
<!-- Mobile post navigation tabs -->
|
||||
<div class="flex overflow-x-auto gap-2 pb-3 mb-4 md:hidden social-tabs">
|
||||
<button class="social-tab active flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/90 rounded-full text-sm font-medium transition-all shadow-sm" data-platform="all">
|
||||
<span class="w-2 h-2 rounded-full bg-oren"></span>
|
||||
Semua
|
||||
</button>
|
||||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="instagram">
|
||||
<span class="w-2 h-2 rounded-full bg-gradient-to-br from-purple-500 to-pink-500"></span>
|
||||
Instagram
|
||||
</button>
|
||||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="twitter">
|
||||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||||
Twitter
|
||||
</button>
|
||||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="tiktok">
|
||||
<span class="w-2 h-2 rounded-full bg-black"></span>
|
||||
TikTok
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Social media post grid with responsive layout -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 relative z-10">
|
||||
<!-- Instagram Post 1 -->
|
||||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||||
<div class="social-post instagram-post group" data-platform="instagram">
|
||||
<div class="social-post-header instagram-header">
|
||||
<div class="social-icon instagram-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||||
</div>
|
||||
<div class="social-post-content">
|
||||
<blockquote
|
||||
class="instagram-media"
|
||||
data-instgrm-captioned
|
||||
data-instgrm-permalink="https://www.instagram.com/p/DBtPIcETJjm/?utm_source=ig_embed&utm_campaign=loading"
|
||||
data-instgrm-version="14"
|
||||
style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||||
style="background:#FFF; border:0; border-radius:0; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="social-post-footer instagram-gradient opacity-0 group-hover:opacity-100">
|
||||
<a href="https://www.instagram.com/dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||||
<span>Kunjungi Instagram</span>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instagram Post 2 -->
|
||||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||||
<div class="social-post instagram-post group" data-platform="instagram">
|
||||
<div class="social-post-header instagram-header">
|
||||
<div class="social-icon instagram-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-medium text-sm">@@jakartasadarsampah</span>
|
||||
</div>
|
||||
<div class="social-post-content">
|
||||
<blockquote
|
||||
class="instagram-media"
|
||||
data-instgrm-captioned
|
||||
data-instgrm-permalink="https://www.instagram.com/p/DEzFYTwpJDW/?utm_source=ig_embed&utm_campaign=loading"
|
||||
data-instgrm-version="14"
|
||||
style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||||
style="background:#FFF; border:0; border-radius:0; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="social-post-footer instagram-gradient opacity-0 group-hover:opacity-100">
|
||||
<a href="https://www.instagram.com/jakartasadarsampah" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||||
<span>Kunjungi Instagram</span>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Twitter Post -->
|
||||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 bg-white mx-auto">
|
||||
<div class="social-post twitter-post group" data-platform="twitter">
|
||||
<div class="social-post-header twitter-header">
|
||||
<div class="social-icon twitter-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||||
</div>
|
||||
<div class="social-post-content">
|
||||
<blockquote class="twitter-tweet" data-theme="light" data-width="100%" style="height:100%; border:0; margin:0;">
|
||||
<a href="https://twitter.com/dinaslhdki/status/1884521645173596375?ref_src=twsrc%5Etfw">January 29, 2025</a>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="social-post-footer twitter-gradient opacity-0 group-hover:opacity-100">
|
||||
<a href="https://x.com/dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||||
<span>Kunjungi X</span>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TikTok Post -->
|
||||
<div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
|
||||
<div class="social-post tiktok-post group" data-platform="tiktok">
|
||||
<div class="social-post-header tiktok-header">
|
||||
<div class="social-icon tiktok-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||||
</div>
|
||||
<div class="social-post-content">
|
||||
<blockquote
|
||||
class="tiktok-embed"
|
||||
cite="https://www.tiktok.com/@@dinaslhdki/video/7332309253337746694"
|
||||
data-video-id="7332309253337746694"
|
||||
style="max-width:100%; min-width:100%; height:100%; margin:0; border:0; border-radius:8px;">
|
||||
style="max-width:100%; min-width:100%; height:100%; margin:0; border:0; border-radius:0;">
|
||||
<section>
|
||||
<a target="_blank" title="@@dinaslhdki" href="https://www.tiktok.com/@@dinaslhdki?refer=embed">@@dinaslhdki</a>
|
||||
Street Sweeper Electric⚡️ Peluncuran Street sweeper Electric, menyapu dan menyedot sampah ke dalam bak tahan karat dengan teknologi mesin yang lebih ramah lingkungan☘️
|
||||
|
|
@ -63,16 +152,449 @@
|
|||
</section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="social-post-footer tiktok-gradient opacity-0 group-hover:opacity-100">
|
||||
<a href="https://www.tiktok.com/@@dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||||
<span>Kunjungi Tiktok</span>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view all button -->
|
||||
<div class="mt-6 flex justify-center md:hidden">
|
||||
<a href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-oren text-white rounded-full font-medium shadow-md hover:bg-amber-600 transition-colors">
|
||||
<span>Lihat Semua</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<register-block dynamic-section="css" key="cssSosmed">
|
||||
<style>
|
||||
/* Social media posts styling - Enhanced for mobile */
|
||||
.social-post {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Mobile-specific post styling */
|
||||
@@media (max-width: 768px) {
|
||||
.social-post {
|
||||
height: 450px;
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.social-post:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.social-post-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.social-post-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.social-post-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Platform specific styling */
|
||||
|
||||
/* Instagram styling */
|
||||
.instagram-post {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.instagram-post:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.instagram-header {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
|
||||
}
|
||||
|
||||
.instagram-icon {
|
||||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
|
||||
}
|
||||
|
||||
.instagram-gradient {
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
}
|
||||
|
||||
/* Twitter/X styling */
|
||||
.twitter-post {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twitter-post:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #1DA1F2;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.twitter-header {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
|
||||
}
|
||||
|
||||
.twitter-icon {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.twitter-gradient {
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
}
|
||||
|
||||
/* TikTok styling */
|
||||
.tiktok-post {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tiktok-post:befor{% %}
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right, #25F4EE, #FE2C55, #000000);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.tiktok-header {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
|
||||
}
|
||||
|
||||
.tiktok-icon {
|
||||
background: #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tiktok-icon:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tiktok-gradient {
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
}
|
||||
|
||||
/* Social buttons styling */
|
||||
.social-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.social-btn:hover {% %}
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.instagram-btn {
|
||||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
|
||||
}
|
||||
|
||||
.twitter-btn {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.tiktok-btn {
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tiktok-btn:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.youtube-btn {
|
||||
background: #FF0000;
|
||||
}
|
||||
|
||||
/* Mobile tabs styling */
|
||||
.social-tabs {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
position: relative;
|
||||
touch-action: pan-x;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.social-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-tab {
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.social-tab.active {
|
||||
opacity: 1;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.social-tab.active:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: #F97316;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.swipe-indicator {
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
|
||||
@@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Additional TikTok post optimizations for mobile */
|
||||
@@media (max-width: 640px) {
|
||||
.tiktok-post {
|
||||
height: 500px; /* Extra height for TikTok content */
|
||||
}
|
||||
|
||||
.tiktok-post .tiktok-embed {
|
||||
margin-top: -25px !important; /* Adjust TikTok embed position */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsSosmed">
|
||||
<script async src="https://www.instagram.com/embed.js"></script>
|
||||
<script async src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||||
<script>
|
||||
// Mobile tabs functionality with touch swipe support
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabs = document.querySelectorAll('.social-tab');
|
||||
const posts = document.querySelectorAll('.social-post');
|
||||
const tabsContainer = document.querySelector('.social-tabs');
|
||||
let currentTabIndex = 0;
|
||||
|
||||
// Function to switch to a specific tab
|
||||
function switchToTab(tabIndex) {
|
||||
if (tabIndex < 0) tabIndex = 0;
|
||||
if (tabIndex >= tabs.length) tabIndex = tabs.length - 1;
|
||||
|
||||
currentTabIndex = tabIndex;
|
||||
const selectedTab = tabs[tabIndex];
|
||||
const platform = selectedTab.getAttribute('data-platform');
|
||||
|
||||
// Update active tab
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
selectedTab.classList.add('active');
|
||||
|
||||
// Scroll tab into view with smooth animation
|
||||
selectedTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
|
||||
|
||||
// Show/hide posts based on platform
|
||||
if (platform === 'all') {
|
||||
posts.forEach(post => {
|
||||
post.style.display = 'block';
|
||||
});
|
||||
} else {
|
||||
posts.forEach(post => {
|
||||
if (post.getAttribute('data-platform') === platform) {
|
||||
post.style.display = 'block';
|
||||
} else {
|
||||
post.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reload embeds when tabs are switched (helps with display issues)
|
||||
setTimeout(() => {
|
||||
if (window.instgrm) window.instgrm.Embeds.process();
|
||||
if (window.twttr) window.twttr.widgets.load();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Click event for tabs
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', function() {
|
||||
switchToTab(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Touch swipe functionality for tab container
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
function handleTouchStart(event) {
|
||||
touchStartX = event.changedTouches[0].screenX;
|
||||
}
|
||||
|
||||
function handleTouchEnd(event) {
|
||||
touchEndX = event.changedTouches[0].screenX;
|
||||
handleSwipe();
|
||||
}
|
||||
|
||||
function handleSwipe() {
|
||||
const swipeThreshold = 50; // Minimum distance to detect a swipe
|
||||
|
||||
// Left swipe (next tab)
|
||||
if (touchEndX < touchStartX - swipeThreshold) {
|
||||
switchToTab(currentTabIndex + 1);
|
||||
}
|
||||
|
||||
// Right swipe (previous tab)
|
||||
if (touchEndX > touchStartX + swipeThreshold) {
|
||||
switchToTab(currentTabIndex - 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Add touch event listeners to both tabs and posts container for better UX
|
||||
if (tabsContainer) {
|
||||
tabsContainer.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||
tabsContainer.addEventListener('touchend', handleTouchEnd, { passive: true });
|
||||
}
|
||||
|
||||
const postsContainer = document.querySelector('.grid');
|
||||
if (postsContainer) {
|
||||
postsContainer.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||
postsContainer.addEventListener('touchend', handleTouchEnd, { passive: true });
|
||||
}
|
||||
|
||||
// Fix embed sizing issues on mobile
|
||||
function resizeEmbeds() {
|
||||
const containers = document.querySelectorAll('.social-post-content');
|
||||
if (window.innerWidth < 640) {
|
||||
containers.forEach(container => {
|
||||
container.style.minHeight = '400px';
|
||||
});
|
||||
} else {
|
||||
containers.forEach(container => {
|
||||
container.style.minHeight = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resizeEmbeds);
|
||||
resizeEmbeds();
|
||||
|
||||
// Add visible cues for swipe functionality on mobile
|
||||
if (window.innerWidth <= 768) {
|
||||
const swipeIndicator = document.createElement('div');
|
||||
swipeIndicator.className = 'swipe-indicator flex items-center justify-center gap-2 text-gray-500 text-xs mt-1 mb-3';
|
||||
swipeIndicator.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M12.5 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H12a.5.5 0 0 1 .5.5z"/>
|
||||
</svg>
|
||||
<span>Geser untuk melihat semua</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 0 .5.5h6.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L10.293 7.5H4a.5.5 0 0 0-.5.5z"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
if (tabsContainer) {
|
||||
tabsContainer.after(swipeIndicator);
|
||||
|
||||
// Auto-hide swipe indicator after 5 seconds
|
||||
setTimeout(() => {
|
||||
swipeIndicator.style.opacity = '0';
|
||||
swipeIndicator.style.transition = 'opacity 1s ease';
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize with the first tab active
|
||||
switchToTab(0);
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -0,0 +1,468 @@
|
|||
<div class="relative py-16 bg-white video-theater-container overflow-hidden">
|
||||
<!-- Ambient background with subtle pattern -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute inset-0 bg-grid-pattern"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 relative z-10">
|
||||
<!-- Header Section -->
|
||||
<div class="text-center mb-12" data-aos="fade-down" data-aos-delay="300">
|
||||
<div class="inline-flex items-center gap-2 bg-oren px-5 py-2 rounded-full mb-6 relative overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
|
||||
<span class="relative w-2 h-2 bg-white rounded-full animate-ping-slow"></span>
|
||||
<span class="relative text-white font-medium text-xs uppercase tracking-wider">Video Terbaru</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">
|
||||
<span class="relative inline-block">
|
||||
Video Terkini
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Video Theater -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-6xl mx-auto" data-aos="fade-up" data-aos-delay="400">
|
||||
<!-- Left Column: Main Video -->
|
||||
<div class="md:col-span-2">
|
||||
<div class="video-theater rounded-xl overflow-hidden shadow-xl relative">
|
||||
<div class="aspect-video relative z-10">
|
||||
<iframe id="mainVideoEmbed" width="100%" height="100%" src="https://www.youtube.com/embed/05NdDFoOHPE?si=NbGEtdA7nMfGbDoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="absolute inset-0"></iframe>
|
||||
|
||||
<div id="videoOverlay" class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/10 flex items-center justify-center cursor-pointer transition-opacity group">
|
||||
<div class="play-button-container relative transform transition-all duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-orange-600 rounded-full opacity-20 animate-ping-slow"></div>
|
||||
<div class="relative bg-gradient-to-br from-orange-500 to-orange-600 rounded-full p-1 group-hover:from-orange-400 group-hover:to-orange-600 transition-all duration-300">
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-full p-4">
|
||||
<svg class="w-8 h-8 text-white ml-1" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5.14v14l11-7-11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Info Overlay -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-4 z-20 bg-gradient-to-t from-black via-black/80 to-transparent">
|
||||
<div class="video-info-container">
|
||||
<h3 id="mainVideoTitle" class="text-white text-lg font-bold video-title">Selamat Hari Lingkungan Hidup, 5 Juni 2025. #GubernurJakarta</h3>
|
||||
<p id="mainVideoDescription" class="text-slate-300 text-sm max-w-3xl mt-1 video-description line-clamp-2">
|
||||
Saya Pramono Anung, Gubernur Jakarta. Menyampaikan pada Hari Lingkungan Hidup tahun 2025, Pemerintah Provinsi DKI Jakarta berkolaborasi dengan Breathe Jakarta dan Clean Air Asia (CAA), akan memperingatinya dengan langkah bersama untuk mengurangi emisi polutan udara melalui perubahan mobilisasi yang bersih.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Video Thumbnails -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-gray-800 text-sm font-medium">Video Lainnya</h3>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button id="prev-video" class="bg-gray-100 text-gray-600 p-1.5 rounded-full hover:bg-orange-500 hover:text-white transition-colors duration-300">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="next-video" class="bg-gray-100 text-gray-600 p-1.5 rounded-full hover:bg-orange-500 hover:text-white transition-colors duration-300">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vertical Thumbnails Container -->
|
||||
<div class="overflow-y-auto video-thumbnails-container h-[350px] pr-1 border rounded-xl border-gray-200 bg-gray-50 shadow-sm">
|
||||
<div id="thumbnails-container" class="flex flex-col space-y-2 p-2">
|
||||
<!-- Thmbnail ada di JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="text-center mt-12" data-aos="fade-up" data-aos-delay="600">
|
||||
<button class="relative inline-flex items-center justify-center overflow-hidden rounded-lg group bg-gradient-to-br from-orange-500 to-orange-600 p-0.5 font-medium hover:shadow-lg hover:shadow-orange-200 transition-all duration-300">
|
||||
<span class="relative rounded-md bg-white px-8 py-3.5 transition-all duration-500 ease-in-out group-hover:bg-opacity-0 group-hover:text-white">
|
||||
<span class="relative flex items-center gap-2">
|
||||
Lihat Semua Video
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<register-block dynamic-section="css" key="cssVideo">
|
||||
<style>
|
||||
/* Animation keyframes */
|
||||
@@keyframes ping-slow {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
75%, 100% { transform: scale(2); opacity: 0; }
|
||||
}
|
||||
|
||||
@@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.2; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@@keyframes pulse-slow-delay {
|
||||
0%, 100% { opacity: 0.2; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.animate-ping-slow {
|
||||
animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-slow-delay {
|
||||
animation: pulse-slow-delay 6s ease-in-out 3s infinite;
|
||||
}
|
||||
|
||||
/* Grid background pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image: radial-gradient(circle, #7e7e7e 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
/* Hover glow effect */
|
||||
.hover\:shadow-glow:hover {
|
||||
box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Video theater styling - modified for light theme */
|
||||
.video-theater::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: linear-gradient(45deg, #3b82f6, #4f46e5, #3b82f6);
|
||||
border-radius: inherit;
|
||||
z-index: 0;
|
||||
opacity: 0.3;
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Video reflection effect */
|
||||
.video-reflection {
|
||||
background: linear-gradient(to bottom, rgba(59, 130, 246, 0.15), transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: scaleY(-1);
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
/* Video title and description transitions */
|
||||
.video-title, .video-description {
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Thumbnail styling */
|
||||
.video-thumbnail {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-thumbnail.active {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
/* Modern scrollbar for thumbnails */
|
||||
.thumbnails-container::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.thumbnails-container::-webkit-scrollbar-track {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.thumbnails-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Additional styles for the vertical thumbnails layout */
|
||||
.video-thumbnails-container {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100,100,100,0.2) rgba(220,220,220,0.1);
|
||||
}
|
||||
|
||||
.video-thumbnails-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.video-thumbnails-container::-webkit-scrollbar-track {
|
||||
background: rgba(220,220,220,0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.video-thumbnails-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(100,100,100,0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.video-thumbnails-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(100,100,100,0.5);
|
||||
}
|
||||
|
||||
/* Thumbnail modifications for vertical layout */
|
||||
.video-thumbnail.vertical {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-thumbnail.vertical.active {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsVideo">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize AOS
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true
|
||||
});
|
||||
|
||||
// Video Data
|
||||
const videoData = [
|
||||
{
|
||||
id: '05NdDFoOHPE',
|
||||
title: 'Selamat Hari Lingkungan Hidup, 5 Juni 2025. #GubernurJakarta',
|
||||
description: 'Saya Pramono Anung, Gubernur Jakarta. Menyampaikan pada Hari Lingkungan Hidup tahun 2025, Pemerintah Provinsi DKI Jakarta berkolaborasi dengan Breathe Jakarta dan Clean Air Asia (CAA), akan memperingatinya dengan langkah bersama untuk mengurangi emisi polutan udara melalui perubahan mobilisasi yang bersih.',
|
||||
date: '5 Juni 2025'
|
||||
},
|
||||
{
|
||||
id: 'HW-ZIPBeKs4',
|
||||
title: 'Operasi Gabungan Uji Emisi Kendaraan Berat',
|
||||
description: 'Operasi Gabungan Uji Emisi Kendaraan Berat digelar Selasa, 15 April 2025 di Jl. TB Simatupang, Ciracas, Jakarta Timur.',
|
||||
date: '18 Mei 2023'
|
||||
},
|
||||
{
|
||||
id: 'F0R5Wu2EY5c',
|
||||
title: 'Kolaborasi Nyata Wujudkan Kampung Iklim',
|
||||
description: 'RW 01 Pondok Bambu menjadi lokasi pelaksanaan Forum Grup Diskusi Program Kampung Iklim yang diinisiasi oleh Dinas Lingkungan Hidup Provinsi DKI Jakarta bersama Pertamina Retail dan masyarakat setempat. ',
|
||||
date: '10 Mei 2023'
|
||||
},
|
||||
{
|
||||
id: 'jNQXAC9IVRw',
|
||||
title: 'Monitoring Kualitas Udara',
|
||||
description: 'Sistem monitoring kualitas udara real-time untuk menjaga kesehatan masyarakat Jakarta.',
|
||||
date: '5 Mei 2023'
|
||||
},
|
||||
{
|
||||
id: 'OPf0YbXqDm0',
|
||||
title: 'Gerakan Reboisasi Perkotaan',
|
||||
description: 'Program penanaman pohon untuk meningkatkan kualitas udara dan menciptakan ruang hijau di Jakarta.',
|
||||
date: '28 April 2023'
|
||||
},
|
||||
{
|
||||
id: 'uelHwf8o7_U',
|
||||
title: 'Penanganan Banjir Terintegrasi',
|
||||
description: 'Sistem penanganan banjir terintegrasi melalui kolaborasi berbagai instansi dan masyarakat.',
|
||||
date: '21 April 2023'
|
||||
}
|
||||
];
|
||||
|
||||
// DOM Elements
|
||||
const mainVideoEmbed = document.getElementById('mainVideoEmbed');
|
||||
const mainTitle = document.getElementById('mainVideoTitle');
|
||||
const mainDescription = document.getElementById('mainVideoDescription');
|
||||
const mainVideoDate = document.getElementById('mainVideoDate');
|
||||
const videoOverlay = document.getElementById('videoOverlay');
|
||||
const thumbnailsContainer = document.getElementById('thumbnails-container');
|
||||
const prevBtn = document.getElementById('prev-video');
|
||||
const nextBtn = document.getElementById('next-video');
|
||||
|
||||
// Track Current Video and Position
|
||||
let currentVideoId = videoData[0].id;
|
||||
let currentVideoIndex = 0;
|
||||
let thumbnailsScrollPosition = 0;
|
||||
const visibleThumbnails = 4; // Number of visible thumbnails in the container
|
||||
|
||||
// Generate Video Thumbnails for vertical layout
|
||||
videoData.forEach((video, index) => {
|
||||
const thumbnailElement = document.createElement('div');
|
||||
thumbnailElement.className = `video-thumbnail vertical ${index === 0 ? 'active' : ''} flex-shrink-0`;
|
||||
thumbnailElement.setAttribute('data-video-id', video.id);
|
||||
thumbnailElement.setAttribute('data-index', index);
|
||||
|
||||
thumbnailElement.innerHTML = `
|
||||
<div class="rounded-lg overflow-hidden transition-all duration-300 group ${index === 0 ? 'border-l-4 border-orange-500 bg-orange-50/50' : 'hover:bg-gray-100'}">
|
||||
<div class="flex items-center p-1">
|
||||
<div class="flex-shrink-0 w-24 h-16 relative rounded-md overflow-hidden">
|
||||
<img src="https://img.youtube.com/vi/${video.id}/mqdefault.jpg" alt="${video.title}"
|
||||
class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="w-8 h-8 bg-orange-600/80 rounded-full flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 min-w-0">
|
||||
<h4 class="text-gray-800 font-medium text-sm line-clamp-2 group-hover:text-orange-700 transition-colors duration-300 cursor-pointer">${video.title}</h4>
|
||||
<p class="text-gray-500 text-xs mt-1">${video.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
thumbnailsContainer.appendChild(thumbnailElement);
|
||||
|
||||
// Click handler
|
||||
thumbnailElement.addEventListener('click', function() {
|
||||
const index = parseInt(this.getAttribute('data-index'));
|
||||
changeVideo(index);
|
||||
});
|
||||
});
|
||||
|
||||
// All thumbnails after generation
|
||||
const thumbnails = document.querySelectorAll('.video-thumbnail');
|
||||
|
||||
// Function to change the current video
|
||||
function changeVideo(index) {
|
||||
if (index < 0 || index >= videoData.length) return;
|
||||
|
||||
// Update current index
|
||||
currentVideoIndex = index;
|
||||
currentVideoId = videoData[index].id;
|
||||
|
||||
// Update main video
|
||||
mainVideoEmbed.src = `https://www.youtube.com/embed/${currentVideoId}`;
|
||||
|
||||
// Animate title and description change
|
||||
gsap.timeline()
|
||||
.to([mainTitle, mainDescription, mainVideoDate], {opacity: 0, x: -20, duration: 0.2})
|
||||
.call(() => {
|
||||
mainTitle.textContent = videoData[index].title;
|
||||
mainDescription.textContent = videoData[index].description;
|
||||
mainVideoDate.textContent = videoData[index].date;
|
||||
})
|
||||
.to([mainTitle, mainDescription, mainVideoDate], {opacity: 1, x: 0, duration: 0.3, stagger: 0.1});
|
||||
|
||||
// Update active thumbnail
|
||||
thumbnails.forEach((thumbnail, i) => {
|
||||
const thumbnailDiv = thumbnail.querySelector('div');
|
||||
if (i === index) {
|
||||
thumbnail.classList.add('active');
|
||||
thumbnailDiv.classList.add('border-l-4', 'border-orange-500', 'bg-orange-50/50');
|
||||
thumbnailDiv.classList.remove('hover:bg-gray-100');
|
||||
} else {
|
||||
thumbnail.classList.remove('active');
|
||||
thumbnailDiv.classList.remove('border-l-4', 'border-orange-500', 'bg-orange-50/50');
|
||||
thumbnailDiv.classList.add('hover:bg-gray-100');
|
||||
}
|
||||
});
|
||||
|
||||
// Show overlay
|
||||
videoOverlay.style.display = 'flex';
|
||||
|
||||
// Ensure the active thumbnail is visible by scrolling it into view
|
||||
ensureThumbnailVisible(index);
|
||||
}
|
||||
|
||||
// Function to ensure the selected thumbnail is visible
|
||||
function ensureThumbnailVisible(index) {
|
||||
const thumbElement = thumbnails[index];
|
||||
if (!thumbElement) return;
|
||||
|
||||
// Scroll the thumbnail into view
|
||||
thumbElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
|
||||
// Navigation functionality
|
||||
function navigateVideos(direction) {
|
||||
let newIndex = currentVideoIndex + direction;
|
||||
|
||||
// Handle boundary conditions
|
||||
if (newIndex < 0) {
|
||||
newIndex = videoData.length - 1;
|
||||
} else if (newIndex >= videoData.length) {
|
||||
newIndex = 0;
|
||||
}
|
||||
|
||||
changeVideo(newIndex);
|
||||
}
|
||||
|
||||
// Navigation button click handlers
|
||||
prevBtn.addEventListener('click', () => navigateVideos(-1));
|
||||
nextBtn.addEventListener('click', () => navigateVideos(1));
|
||||
|
||||
// Play video functionality
|
||||
videoOverlay.addEventListener('click', function() {
|
||||
mainVideoEmbed.src = `https://www.youtube.com/embed/${currentVideoId}?autoplay=1`;
|
||||
gsap.to(videoOverlay, {opacity: 0, duration: 0.5, onComplete: () => {
|
||||
videoOverlay.style.display = 'none';
|
||||
}});
|
||||
});
|
||||
|
||||
// Add keyboard navigation
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
|
||||
navigateVideos(-1);
|
||||
} else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
|
||||
navigateVideos(1);
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up video hover effect to be more subtle
|
||||
const videoTheater = document.querySelector('.video-theater');
|
||||
|
||||
videoTheater.addEventListener('mousemove', function(e) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
// Make the effect more subtle
|
||||
const moveX = (x - centerX) / 50;
|
||||
const moveY = (y - centerY) / 50;
|
||||
|
||||
gsap.to(this, {
|
||||
rotateY: moveX,
|
||||
rotateX: -moveY,
|
||||
transformPerspective: 1000,
|
||||
transformOrigin: 'center center',
|
||||
ease: 'power1.out',
|
||||
duration: 0.5
|
||||
});
|
||||
});
|
||||
|
||||
videoTheater.addEventListener('mouseleave', function() {
|
||||
gsap.to(this, {
|
||||
rotateY: 0,
|
||||
rotateX: 0,
|
||||
duration: 0.5,
|
||||
ease: 'power1.out'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</register-block>
|
||||
|
|
@ -1,285 +1,725 @@
|
|||
<div class="relative bg-gradient-to-br from-amber-600 via-amber-700 to-orange-600 py-16 md:py-24 min-h-screen">
|
||||
<div class="container mx-auto px-4 max-w-7xl">
|
||||
<!-- Heading Section -->
|
||||
<div class="text-center text-white mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
||||
<div class="relative py-16 md:py-32 bg-gradient-to-b from-slate-50 to-slate-100 overflow-hidden">
|
||||
<!-- Background subtle design elements -->
|
||||
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-grid-pattern opacity-5"></div>
|
||||
<div class="absolute top-10 left-10 w-32 h-32 bg-blue-500 rounded-full filter blur-[100px] opacity-20"></div>
|
||||
<div class="absolute bottom-10 right-10 w-32 h-32 bg-purple-500 rounded-full filter blur-[100px] opacity-20"></div>
|
||||
<div id="particle-container" class="absolute inset-0"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 max-w-7xl relative z-10">
|
||||
<!-- Heading Section with animated underline -->
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-block relative">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">
|
||||
Layanan Digital
|
||||
</h2>
|
||||
<p class="max-w-3xl mx-auto text-lg md:text-xl leading-relaxed text-amber-50">
|
||||
Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
|
||||
@* <div class="heading-underline"></div> *@
|
||||
</div>
|
||||
<p class="max-w-2xl mx-auto text-lg md:text-xl leading-relaxed text-gray-600 mt-6">
|
||||
Solusi digital inovatif dari DLH DKI Jakarta untuk Jakarta yang lebih bersih,
|
||||
hijau, dan berkelanjutan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Three Laptops Display -->
|
||||
<div class="relative max-w-6xl mx-auto">
|
||||
<div class="grid grid-cols-3 gap-6 mb-12">
|
||||
<!-- Website Image 1 -->
|
||||
<div class="website-item" data-index="0">
|
||||
<img src="/assets/images/home/skl.png" alt="Sistem Ketaatan Lingkungan" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
||||
<!-- 3D Website Showcase -->
|
||||
<div id="websites-showcase" class="relative">
|
||||
<!-- Laptop mockup container -->
|
||||
<div class="laptop-viewport relative max-w-5xl mx-auto h-[450px] md:h-[600px]">
|
||||
<div class="laptop-container w-full h-full relative transform-gpu perspective">
|
||||
<!-- Website slides will be created by JavaScript within this laptop mockup -->
|
||||
</div>
|
||||
|
||||
<!-- Website Image 2 -->
|
||||
<div class="website-item active" data-index="1">
|
||||
<img src="/assets/images/home/skl.png" alt="Jakarta Lingko" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
||||
<!-- Floating UI elements -->
|
||||
@* <div class="floating-ui-element device-metrics absolute top-0 left-0 md:left-10 p-4 bg-white/10 backdrop-blur-lg rounded-lg border border-white/30 shadow-xl transform-gpu -translate-y-1/2 opacity-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
||||
<div>
|
||||
<span class="text-xs font-mono text-gray-700 block">Resolution</span>
|
||||
<span class="text-sm font-bold text-gray-900">1920 x 1080</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> *@
|
||||
|
||||
<!-- Website Image 3 -->
|
||||
<div class="website-item" data-index="2">
|
||||
<img src="/assets/images/home/skl.png" alt="Lingkungan Jakarta" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
||||
<div class="floating-ui-element website-info absolute top-10 right-0 md:right-10 p-4 bg-white/10 backdrop-blur-lg rounded-lg border border-white/30 shadow-xl transform-gpu translate-y-1/2 opacity-0">
|
||||
<h3 class="text-lg font-bold text-gray-900" id="current-website-title">Sistem Ketaatan Lingkungan</h3>
|
||||
<div class="flex items-center mt-2">
|
||||
<div class="flex items-center bg-gray-100 rounded-l-md px-3 py-2">
|
||||
<span class="text-gray-500">https://</span>
|
||||
</div>
|
||||
<input type="text" id="urlDisplay" value="wasdal.jakarta.go.id" class="bg-white py-2 px-3 border-y border-r border-gray-200 rounded-r-md text-gray-800 text-sm flex-1 font-medium focus:outline-none" readonly>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end">
|
||||
<a href="#" id="visitWebsite" target="_blank" class="visit-btn inline-flex items-center gap-1 px-3 py-1 rounded-md text-white text-sm font-medium">
|
||||
<span>Kunjungi</span>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured URL Display -->
|
||||
<div class="relative mx-auto max-w-md mb-8">
|
||||
<div class="bg-white/95 backdrop-blur-sm flex items-center rounded-2xl overflow-hidden shadow-2xl border border-white/20">
|
||||
<div class="flex items-center px-4 py-1">
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<!-- Custom navigation -->
|
||||
<div class="website-nav flex items-center justify-center">
|
||||
<button id="prev-website" class="nav-btn flex items-center justify-center w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm shadow-lg hover:bg-white transition-all duration-300 focus:outline-none">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="website-progress relative h-1 bg-gray-200 rounded-full mx-6 overflow-hidden w-1/3 max-w-xs">
|
||||
<div class="absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 to-green-600 rounded-full progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
|
||||
<div id="website-indicators" class="hidden md:flex justify-center space-x-3 mx-6">
|
||||
<!-- Indicators will be dynamically populated -->
|
||||
</div>
|
||||
<input type="text" id="urlDisplay" value="jaklingko.jakarta.go.id" class="flex-1 py-4 px-4 text-gray-800 focus:outline-none font-medium bg-transparent" readonly>
|
||||
<button class="bg-gradient-to-r from-amber-600 to-orange-600 p-4 hover:from-amber-700 hover:to-orange-700 transition-all duration-300">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
|
||||
<button id="next-website" class="nav-btn flex items-center justify-center w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm shadow-lg hover:bg-white transition-all duration-300 focus:outline-none">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Indicators -->
|
||||
<div class="flex justify-center space-x-4" id="indicators">
|
||||
<button class="indicator group relative" data-slide="0">
|
||||
<div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
|
||||
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">SKL</span>
|
||||
</button>
|
||||
<button class="indicator group relative active" data-slide="1">
|
||||
<div class="w-12 h-3 rounded-full bg-white group-hover:bg-white transition-all duration-300"></div>
|
||||
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white text-xs font-medium">Lingko</span>
|
||||
</button>
|
||||
<button class="indicator group relative" data-slide="2">
|
||||
<div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
|
||||
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">Lingkungan</span>
|
||||
</button>
|
||||
<!-- Visual tech elements -->
|
||||
@* <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12 max-w-4xl mx-auto">
|
||||
<div class="tech-feature bg-white rounded-xl p-4 shadow-lg transform hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-blue-50 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-800">Aman</span>
|
||||
<span class="block text-xs text-gray-500">SSL Secured</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature bg-white rounded-xl p-4 shadow-lg transform hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-green-50 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-800">Cepat</span>
|
||||
<span class="block text-xs text-gray-500">Optimized</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature bg-white rounded-xl p-4 shadow-lg transform hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-purple-50 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-800">Responsif</span>
|
||||
<span class="block text-xs text-gray-500">Mobile-friendly</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature bg-white rounded-xl p-4 shadow-lg transform hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-amber-50 rounded-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-800">Terintegrasi</span>
|
||||
<span class="block text-xs text-gray-500">Connected APIs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> *@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<register-block dynamic-section="css" key="cssWebsite">
|
||||
<style>
|
||||
.laptop-screen {
|
||||
border-radius: 8px 8px 0 0;
|
||||
border: 3px solid #374151;
|
||||
background: #1f2937;
|
||||
/* Background pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image: radial-gradient(circle, #000 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
.laptop-base {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.laptop-base::before {
|
||||
content: "";
|
||||
/* Animated heading underline */
|
||||
.heading-underline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
border-radius: 4px;
|
||||
animation: underline-expand 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@@keyframes underline-expand {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
|
||||
/* 3D perspective for laptop */
|
||||
.perspective {
|
||||
perspective: 2500px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Laptop mockup styles */
|
||||
.laptop-mockup {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 8px;
|
||||
background: #9ca3af;
|
||||
border-radius: 4px;
|
||||
transform: translate(-50%, -50%) rotateX(20deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.website-slide {
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.website-card {
|
||||
transition: all 0.4s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.website-card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.website-card.active {
|
||||
transform: scale(1.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.laptop-frame {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
.laptop-lid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #32363e;
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.screen-content {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
.laptop-screen {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.laptop-keyboard {
|
||||
position: absolute;
|
||||
width: 110%;
|
||||
height: 10px;
|
||||
bottom: -15px;
|
||||
left: -5%;
|
||||
background: linear-gradient(to bottom, #32363e, #1a1c20);
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
transform: rotateX(-90deg);
|
||||
transform-origin: top;
|
||||
transform-style: preserve-3d;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.laptop-keyboard::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 4px;
|
||||
bottom: 3px;
|
||||
left: 40%;
|
||||
background: #555;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.laptop-camera {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Website slide styles */
|
||||
.website-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transform: translateZ(-500px);
|
||||
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.website-slide.active {
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.website-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Floating UI elements */
|
||||
.floating-ui-element {
|
||||
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Visit button styling */
|
||||
.visit-btn {
|
||||
background-color: #f49827;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.visit-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Navigation button effects */
|
||||
.nav-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Progress bar animation */
|
||||
.progress-bar {
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Indicator styling */
|
||||
.website-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(34, 197, 94, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.website-indicator.active {
|
||||
background: #26ac7e;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Tech feature hover */
|
||||
.tech-feature {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Particle styling */
|
||||
.website-particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(79, 70, 229, 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</register-block>
|
||||
|
||||
<register-block dynamic-section="scripts" key="jsWebsite">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
|
||||
|
||||
// Website data configuration
|
||||
const websites = [
|
||||
{
|
||||
image: asset("skl.png"),
|
||||
image: asset("skl.jpg"),
|
||||
url: "wasdal.jakarta.go.id",
|
||||
title: "Sistem Ketaatan Lingkungan",
|
||||
color: "#3b82f6"
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
image: asset("bps.jpg"),
|
||||
url: "jaklingko.jakarta.go.id",
|
||||
title: "Jakarta Lingko",
|
||||
color: "#10b981"
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
image: asset("skl.jpg"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
color: "#f59e0b"
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
image: asset("bps.jpg"),
|
||||
url: "bpsrw.jakarta.go.id",
|
||||
title: "Bank Sampah RW",
|
||||
color: "#8b5cf6"
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
},
|
||||
{
|
||||
image: asset("bps.png"),
|
||||
url: "lingkungan.jakarta.go.id",
|
||||
title: "Lingkungan Jakarta",
|
||||
},
|
||||
image: asset("skl.jpg"),
|
||||
url: "dlhjakarta.go.id",
|
||||
title: "Portal DLH Jakarta",
|
||||
color: "#ef4444"
|
||||
}
|
||||
];
|
||||
|
||||
// DOM Elements
|
||||
const urlInput = document.getElementById("urlDisplay");
|
||||
const websiteCards = document.querySelectorAll(".website-card");
|
||||
const indicators = document.querySelectorAll(".indicator");
|
||||
const laptopContainer = document.querySelector('.laptop-container');
|
||||
const indicatorsContainer = document.getElementById('website-indicators');
|
||||
const urlDisplay = document.getElementById('urlDisplay');
|
||||
const websiteTitle = document.getElementById('current-website-title');
|
||||
const visitBtn = document.getElementById('visitWebsite');
|
||||
const prevBtn = document.getElementById('prev-website');
|
||||
const nextBtn = document.getElementById('next-website');
|
||||
const progressBar = document.querySelector('.progress-bar');
|
||||
|
||||
let currentIndex = 1; // Start with middle card active
|
||||
let autoRotateInterval;
|
||||
let currentIndex = 0;
|
||||
let isAnimating = false;
|
||||
|
||||
// Update active states
|
||||
function updateActiveStates() {
|
||||
// Update cards
|
||||
websiteCards.forEach((card, index) => {
|
||||
if (index === currentIndex) {
|
||||
card.classList.add("active");
|
||||
} else {
|
||||
card.classList.remove("active");
|
||||
// Create laptop mockup with websites inside
|
||||
const laptopMockup = document.createElement('div');
|
||||
laptopMockup.className = 'laptop-mockup';
|
||||
laptopMockup.innerHTML = `
|
||||
<div class="laptop-lid">
|
||||
<div class="laptop-camera"></div>
|
||||
<div class="laptop-screen">
|
||||
<!-- Website slides will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="laptop-keyboard"></div>
|
||||
`;
|
||||
|
||||
laptopContainer.appendChild(laptopMockup);
|
||||
|
||||
const laptopScreen = laptopMockup.querySelector('.laptop-screen');
|
||||
|
||||
// Create website slides
|
||||
websites.forEach((site, index) => {
|
||||
// Create slide
|
||||
const slide = document.createElement('div');
|
||||
slide.className = `website-slide ${index === 0 ? 'active' : ''}`;
|
||||
slide.setAttribute('data-index', index);
|
||||
|
||||
slide.innerHTML = `
|
||||
<img src="${site.image}" alt="${site.title}" class="website-image">
|
||||
`;
|
||||
|
||||
laptopScreen.appendChild(slide);
|
||||
|
||||
// Create indicator
|
||||
const indicator = document.createElement('button');
|
||||
indicator.className = `website-indicator ${index === 0 ? 'active' : ''}`;
|
||||
indicator.setAttribute('data-index', index);
|
||||
indicator.addEventListener('click', () => {
|
||||
if (!isAnimating && currentIndex !== index) {
|
||||
goToSlide(index);
|
||||
}
|
||||
});
|
||||
|
||||
indicatorsContainer.appendChild(indicator);
|
||||
});
|
||||
|
||||
const slides = document.querySelectorAll('.website-slide');
|
||||
const indicators = document.querySelectorAll('.website-indicator');
|
||||
|
||||
// Initialize website information
|
||||
updateWebsiteInfo(0);
|
||||
|
||||
// Create floating UI animations
|
||||
const floatingElements = document.querySelectorAll('.floating-ui-element');
|
||||
floatingElements.forEach((el, index) => {
|
||||
// Show elements with stagger
|
||||
gsap.to(el, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
delay: 0.5 + (index * 0.2),
|
||||
duration: 1,
|
||||
ease: "power3.out"
|
||||
});
|
||||
|
||||
// Add slight floating animation
|
||||
gsap.to(el, {
|
||||
y: "+=10",
|
||||
duration: 2,
|
||||
ease: "sine.inOut",
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
delay: Math.random()
|
||||
});
|
||||
});
|
||||
|
||||
// Create particles
|
||||
createParticles();
|
||||
|
||||
// Initialize 3D laptop animation
|
||||
gsap.fromTo(laptopMockup,
|
||||
{
|
||||
rotateX: 40,
|
||||
rotateY: 10,
|
||||
y: 100,
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
rotateX: 20,
|
||||
rotateY: 0,
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 1.5,
|
||||
ease: "power3.out",
|
||||
delay: 0.3
|
||||
}
|
||||
);
|
||||
|
||||
// Laptop subtle movement based on mouse position
|
||||
const websitesShowcase = document.getElementById('websites-showcase');
|
||||
websitesShowcase.addEventListener('mousemove', (e) => {
|
||||
const rect = websitesShowcase.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left - (rect.width / 2);
|
||||
const mouseY = e.clientY - rect.top - (rect.height / 2);
|
||||
|
||||
gsap.to(laptopMockup, {
|
||||
rotateY: mouseX * 0.005,
|
||||
rotateX: 20 - (mouseY * 0.01),
|
||||
duration: 1,
|
||||
ease: "power1.out"
|
||||
});
|
||||
});
|
||||
|
||||
// Reset rotation when mouse leaves
|
||||
websitesShowcase.addEventListener('mouseleave', () => {
|
||||
gsap.to(laptopMockup, {
|
||||
rotateX: 20,
|
||||
rotateY: 0,
|
||||
duration: 1,
|
||||
ease: "power1.out"
|
||||
});
|
||||
});
|
||||
|
||||
// Update website information
|
||||
function updateWebsiteInfo(index) {
|
||||
const site = websites[index];
|
||||
if (!site) return;
|
||||
|
||||
// Update URL and title
|
||||
urlDisplay.value = site.url;
|
||||
websiteTitle.textContent = site.title;
|
||||
visitBtn.href = `https://${site.url}`;
|
||||
|
||||
// Update progress bar
|
||||
const progress = ((index + 1) / websites.length) * 100;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
|
||||
// Update visit button color
|
||||
@* gsap.to(visitBtn, {
|
||||
background: `linear-gradient(to right, ${site.color}, ${adjustBrightness(site.color, -20)})`,
|
||||
duration: 0.5
|
||||
}); *@
|
||||
}
|
||||
|
||||
// Helper function to adjust brightness
|
||||
function adjustBrightness(hex, percent) {
|
||||
// This is a simplified version
|
||||
return hex;
|
||||
}
|
||||
|
||||
// Update slider
|
||||
function goToSlide(index) {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
|
||||
// Get current and new slide
|
||||
const currentSlide = slides[currentIndex];
|
||||
const newSlide = slides[index];
|
||||
|
||||
// Direction for animation (left or right)
|
||||
const direction = index > currentIndex ? 1 : -1;
|
||||
|
||||
// Update current index
|
||||
currentIndex = index;
|
||||
|
||||
// Animate current slide out
|
||||
gsap.to(currentSlide, {
|
||||
opacity: 0,
|
||||
z: -500 * direction,
|
||||
duration: 0.8,
|
||||
ease: "power2.in"
|
||||
});
|
||||
|
||||
// Prepare new slide
|
||||
gsap.set(newSlide, {
|
||||
opacity: 0,
|
||||
z: 500 * -direction
|
||||
});
|
||||
|
||||
// Animate new slide in
|
||||
gsap.to(newSlide, {
|
||||
opacity: 1,
|
||||
z: 0,
|
||||
duration: 0.8,
|
||||
delay: 0.2,
|
||||
ease: "power2.out",
|
||||
onComplete: () => {
|
||||
isAnimating = false;
|
||||
|
||||
// Update classes
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
newSlide.classList.add('active');
|
||||
|
||||
// Update indicators
|
||||
indicators.forEach((indicator, index) => {
|
||||
if (index === currentIndex) {
|
||||
indicator.classList.add("active");
|
||||
indicator.querySelector("div").classList.remove("bg-white/30");
|
||||
indicator.querySelector("div").classList.add("bg-white");
|
||||
indicator
|
||||
.querySelector("span")
|
||||
.classList.remove("opacity-0", "text-white/70");
|
||||
indicator.querySelector("span").classList.add("text-white");
|
||||
indicators.forEach((indicator, i) => {
|
||||
if (i === index) {
|
||||
indicator.classList.add('active');
|
||||
} else {
|
||||
indicator.classList.remove("active");
|
||||
indicator.querySelector("div").classList.remove("bg-white");
|
||||
indicator.querySelector("div").classList.add("bg-white/30");
|
||||
indicator
|
||||
.querySelector("span")
|
||||
.classList.add("opacity-0", "text-white/70");
|
||||
indicator.querySelector("span").classList.remove("text-white");
|
||||
indicator.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Update URL
|
||||
if (websites[currentIndex]) {
|
||||
urlInput.value = websites[currentIndex].url;
|
||||
// Update website information
|
||||
updateWebsiteInfo(index);
|
||||
}
|
||||
});
|
||||
|
||||
// Animate laptop slightly based on direction
|
||||
gsap.to(laptopMockup, {
|
||||
rotateY: 5 * direction,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
gsap.to(laptopMockup, {
|
||||
rotateY: 0,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Navigation functions
|
||||
prevBtn.addEventListener('click', () => {
|
||||
if (!isAnimating) {
|
||||
const prevIndex = (currentIndex - 1 + websites.length) % websites.length;
|
||||
goToSlide(prevIndex);
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
if (!isAnimating) {
|
||||
const nextIndex = (currentIndex + 1) % websites.length;
|
||||
goToSlide(nextIndex);
|
||||
}
|
||||
});
|
||||
|
||||
// Create and animate particles
|
||||
function createParticles() {
|
||||
const particleContainer = document.getElementById('particle-container');
|
||||
const particleCount = 20;
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'website-particle';
|
||||
|
||||
// Random size between 5px and 15px
|
||||
const size = Math.random() * 10 + 5;
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
|
||||
// Random position
|
||||
const posX = Math.random() * 100;
|
||||
const posY = Math.random() * 100;
|
||||
particle.style.left = `${posX}%`;
|
||||
particle.style.top = `${posY}%`;
|
||||
particle.style.opacity = Math.random() * 0.5;
|
||||
|
||||
particleContainer.appendChild(particle);
|
||||
|
||||
// Animate particles with GSAP
|
||||
gsap.to(particle, {
|
||||
x: "random(-100, 100)",
|
||||
y: "random(-100, 100)",
|
||||
opacity: "random(0.1, 0.5)",
|
||||
duration: "random(10, 20)",
|
||||
repeat: -1,
|
||||
repeatRefresh: true,
|
||||
ease: "sine.inOut"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to specific slide
|
||||
function navigateToSlide(targetIndex) {
|
||||
if (targetIndex === currentIndex) return;
|
||||
currentIndex = targetIndex;
|
||||
updateActiveStates();
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
prevBtn.click();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
nextBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
// Touch support for mobile
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
websitesShowcase.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
});
|
||||
|
||||
websitesShowcase.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
handleSwipe();
|
||||
});
|
||||
|
||||
function handleSwipe() {
|
||||
if (touchEndX < touchStartX - 50) {
|
||||
// Swipe left
|
||||
nextBtn.click();
|
||||
} else if (touchEndX > touchStartX + 50) {
|
||||
// Swipe right
|
||||
prevBtn.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-rotate functionality
|
||||
// Auto-rotate setup
|
||||
let autoRotateInterval;
|
||||
|
||||
function startAutoRotate() {
|
||||
autoRotateInterval = setInterval(() => {
|
||||
currentIndex = (currentIndex + 1) % websites.length;
|
||||
updateActiveStates();
|
||||
}, 4000);
|
||||
if (!isAnimating) {
|
||||
const nextIndex = (currentIndex + 1) % websites.length;
|
||||
goToSlide(nextIndex);
|
||||
}
|
||||
}, 6000);
|
||||
}
|
||||
|
||||
function stopAutoRotate() {
|
||||
if (autoRotateInterval) {
|
||||
clearInterval(autoRotateInterval);
|
||||
autoRotateInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function resetAutoRotate() {
|
||||
stopAutoRotate();
|
||||
setTimeout(startAutoRotate, 6000);
|
||||
}
|
||||
// Pause on hover
|
||||
websitesShowcase.addEventListener('mouseenter', stopAutoRotate);
|
||||
websitesShowcase.addEventListener('mouseleave', startAutoRotate);
|
||||
|
||||
// Event listeners
|
||||
websiteCards.forEach((card, index) => {
|
||||
card.addEventListener("click", () => {
|
||||
resetAutoRotate();
|
||||
navigateToSlide(index);
|
||||
});
|
||||
});
|
||||
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener("click", () => {
|
||||
resetAutoRotate();
|
||||
navigateToSlide(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Mouse events for auto-rotate control
|
||||
const container = document.querySelector(".max-w-6xl");
|
||||
container.addEventListener("mouseenter", stopAutoRotate);
|
||||
container.addEventListener("mouseleave", () => {
|
||||
if (!autoRotateInterval) {
|
||||
// Start auto rotation
|
||||
startAutoRotate();
|
||||
|
||||
// Add entrance animation for tech features
|
||||
const techFeatures = document.querySelectorAll('.tech-feature');
|
||||
|
||||
gsap.from(techFeatures, {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
stagger: 0.1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out",
|
||||
scrollTrigger: {
|
||||
trigger: techFeatures[0],
|
||||
start: "top bottom-=100px",
|
||||
toggleActions: "play none none none"
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateActiveStates();
|
||||
startAutoRotate();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</register-block>
|
||||
|
|
|
|||
|
|
@ -15,5 +15,6 @@
|
|||
<partial name="~/Views/Components/Home/_Informasi.cshtml" />
|
||||
<partial name="~/Views/Components/Home/_Website.cshtml" />
|
||||
<partial name="~/Views/Components/Home/_Berita.cshtml" />
|
||||
@* <partial name="~/Views/Components/Home/_Video.cshtml" /> *@
|
||||
<partial name="~/Views/Components/Home/_Mitra.cshtml" />
|
||||
<partial name="~/Views/Components/Home/_Video.cshtml" />
|
||||
<partial name="~/Views/Components/Home/_Sosmed.cshtml" />
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-w-7xl mx-auto pb-8">
|
||||
<div class="container max-w-6xl mx-auto pb-8">
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:w-2/3">
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<a href="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,281 @@
|
|||
@{
|
||||
Layout = "_Layout";
|
||||
|
||||
ViewData["Title"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["Description"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
||||
ViewData["Keywords"] = "Laporan Pemantauan Kualitas Air, Regulasi Lingkungan, Kualitas Air, Data Lingkungan, Jakarta";
|
||||
ViewData["OgTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["OgDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
||||
ViewData["TwitterTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["TwitterDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
||||
|
||||
// Breadcumb
|
||||
ViewData["BreadcrumbText"] = "Laporan Pemantauan Kualitas Air";
|
||||
ViewData["TitleBeforeHighlight"] = "Laporan";
|
||||
ViewData["TitleHighlight"] = "Pemantauan Kualitas Air";
|
||||
}
|
||||
|
||||
<!-- Breadcumb -->
|
||||
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="w-full max-w-6xl py-12">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold mb-4">Peraturan</h1>
|
||||
<p class="text-gray-600 max-w-4xl mx-auto">Regulasi Pemantauan Kualitas Air</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-w-6xl mx-auto pb-8">
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:w-2/3">
|
||||
<div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100 p-8 backdrop-blur-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
|
||||
<i class="fas fa-file-archive text-green-600 mr-3"></i>
|
||||
Dokumen Tersedia
|
||||
</h2>
|
||||
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">4 Dokumen</span>
|
||||
</div>
|
||||
|
||||
<!-- Document Items with Enhanced Design -->
|
||||
<div class="space-y-6">
|
||||
<!-- Document Item 1 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<!-- Image Preview Column -->
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Details Column -->
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Ringkasan eksekutif dokumen informasi kinerja pengelolaan lingkungan hidup daerah</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>673 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 2 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku II DIKPLHD Tahun 2019</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Dokumen lengkap informasi kinerja pengelolaan lingkungan hidup daerah</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>673 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 3 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Laporan Kualitas Udara DKI Jakarta 2023</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Laporan komprehensif mengenai kondisi kualitas udara di wilayah DKI Jakarta</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>10 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>412 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 4 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
<div class="absolute top-3 right-3 z-10 bg-green-500 p-2 rounded-full shadow-md">
|
||||
<i class="fas fa-file-excel text-white text-sm"></i>
|
||||
</div>
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Data Pengelolaan Lingkungan Hidup 2024</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Data statistik dan analisis komprehensif mengenai pengelolaan lingkungan hidup</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>5 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>289 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Sidebar -->
|
||||
<div class="lg:w-1/3 space-y-6">
|
||||
<!-- Search Box -->
|
||||
<div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-search text-green-600 mr-3"></i>
|
||||
Cari Dokumen
|
||||
</h3>
|
||||
<div class="relative">
|
||||
<input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
|
||||
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Options -->
|
||||
<div class="bg-gradient-to-br from-white to-blue-50 rounded-xl shadow-lg border border-blue-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-filter text-blue-600 mr-3"></i>
|
||||
Filter Dokumen
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Jenis Dokumen</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Semua Jenis</option>
|
||||
<option>PDF</option>
|
||||
<option>Excel</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Semua Tahun</option>
|
||||
<option>2024</option>
|
||||
<option>2023</option>
|
||||
<option>2019</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Documents -->
|
||||
<div class="bg-gradient-to-br from-white to-purple-50 rounded-xl shadow-lg border border-purple-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-link text-purple-600 mr-3"></i>
|
||||
Dokumen Terkait
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
|
||||
<div class="w-16 h-16 flex-shrink-0">
|
||||
<div class="w-full h-full bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-leaf text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Tata Lingkungan dan Kebersihan</h4>
|
||||
<p class="text-gray-500 text-sm mb-2 flex items-center">
|
||||
<i class="far fa-calendar-alt mr-1"></i>12 Jan 2025
|
||||
</p>
|
||||
<a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
|
||||
Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
|
||||
<div class="w-16 h-16 flex-shrink-0">
|
||||
<div class="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-shield-alt text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Pengendalian Dampak Lingkungan</h4>
|
||||
<p class="text-gray-500 text-sm mb-2 flex items-center">
|
||||
<i class="far fa-calendar-alt mr-1"></i>8 Jan 2025
|
||||
</p>
|
||||
<a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
|
||||
Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
@{
|
||||
Layout = "_Layout";
|
||||
|
||||
ViewData["Title"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["Description"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["Keywords"] = "Peraturan, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["OgTitle"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["OgDescription"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["TwitterTitle"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
ViewData["TwitterDescription"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
||||
|
||||
// Breadcumb
|
||||
ViewData["BreadcrumbText"] = "Peraturan Terkait Lingkungan Hidup";
|
||||
ViewData["TitleBeforeHighlight"] = "Peraturan";
|
||||
ViewData["TitleHighlight"] = "Terkait Lingkungan Hidup";
|
||||
}
|
||||
|
||||
<!-- Breadcumb -->
|
||||
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="w-full max-w-6xl py-12">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold mb-4">Peraturan</h1>
|
||||
<p class="text-gray-600 max-w-4xl mx-auto">Regulasi Terkait Lingkungan Hidup</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-w-6xl mx-auto pb-8">
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:w-2/3">
|
||||
<div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100 p-8 backdrop-blur-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
|
||||
<i class="fas fa-file-archive text-green-600 mr-3"></i>
|
||||
Dokumen Tersedia
|
||||
</h2>
|
||||
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">4 Dokumen</span>
|
||||
</div>
|
||||
|
||||
<!-- Document Items with Enhanced Design -->
|
||||
<div class="space-y-6">
|
||||
<!-- Document Item 1 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<!-- Image Preview Column -->
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Details Column -->
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Ringkasan eksekutif dokumen informasi kinerja pengelolaan lingkungan hidup daerah</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>673 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 2 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku II DIKPLHD Tahun 2019</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Dokumen lengkap informasi kinerja pengelolaan lingkungan hidup daerah</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>673 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 3 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Laporan Kualitas Udara DKI Jakarta 2023</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Laporan komprehensif mengenai kondisi kualitas udara di wilayah DKI Jakarta</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>10 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>412 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document Item 4 -->
|
||||
<div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/4">
|
||||
<div class="relative overflow-hidden rounded-lg">
|
||||
<div class="absolute top-3 right-3 z-10 bg-green-500 p-2 rounded-full shadow-md">
|
||||
<i class="fas fa-file-excel text-white text-sm"></i>
|
||||
</div>
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-3/4">
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Data Pengelolaan Lingkungan Hidup 2024</h3>
|
||||
<p class="text-gray-600 mb-4 leading-relaxed">Data statistik dan analisis komprehensif mengenai pengelolaan lingkungan hidup</p>
|
||||
<div class="flex flex-wrap justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="flex items-center text-orange-500 font-medium">
|
||||
<i class="far fa-calendar-alt mr-2"></i>5 Jan 2025
|
||||
</span>
|
||||
<span class="flex items-center text-gray-500">
|
||||
<i class="fas fa-download mr-2"></i>289 Download
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</a>
|
||||
<a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<i class="fas fa-download mr-2"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Sidebar -->
|
||||
<div class="lg:w-1/3 space-y-6">
|
||||
<!-- Search Box -->
|
||||
<div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-search text-green-600 mr-3"></i>
|
||||
Cari Dokumen
|
||||
</h3>
|
||||
<div class="relative">
|
||||
<input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
|
||||
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Options -->
|
||||
<div class="bg-gradient-to-br from-white to-blue-50 rounded-xl shadow-lg border border-blue-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-filter text-blue-600 mr-3"></i>
|
||||
Filter Dokumen
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Jenis Dokumen</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Semua Jenis</option>
|
||||
<option>PDF</option>
|
||||
<option>Excel</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
|
||||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Semua Tahun</option>
|
||||
<option>2024</option>
|
||||
<option>2023</option>
|
||||
<option>2019</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Documents -->
|
||||
<div class="bg-gradient-to-br from-white to-purple-50 rounded-xl shadow-lg border border-purple-100 p-6">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
||||
<i class="fas fa-link text-purple-600 mr-3"></i>
|
||||
Dokumen Terkait
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
|
||||
<div class="w-16 h-16 flex-shrink-0">
|
||||
<div class="w-full h-full bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-leaf text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Tata Lingkungan dan Kebersihan</h4>
|
||||
<p class="text-gray-500 text-sm mb-2 flex items-center">
|
||||
<i class="far fa-calendar-alt mr-1"></i>12 Jan 2025
|
||||
</p>
|
||||
<a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
|
||||
Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
|
||||
<div class="w-16 h-16 flex-shrink-0">
|
||||
<div class="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-shield-alt text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Pengendalian Dampak Lingkungan</h4>
|
||||
<p class="text-gray-500 text-sm mb-2 flex items-center">
|
||||
<i class="far fa-calendar-alt mr-1"></i>8 Jan 2025
|
||||
</p>
|
||||
<a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
|
||||
Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,18 +10,74 @@
|
|||
<p class="text-sm text-gray-500">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<a href="@Url.Action("Peraturan", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="book-open"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Peraturan</div>
|
||||
<p class="text-sm text-gray-500">Regulasi terkait lingkungan hidup.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="waves"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Kualitas Air</div>
|
||||
<p class="text-sm text-gray-500">Laporan kualitas air terkini.</p>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Laporan Kualitas Air</div>
|
||||
<p class="text-sm text-gray-500">Informasi tentang kualitas air.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="dollar-sign"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Laporan Keuangan</div>
|
||||
<p class="text-sm text-gray-500">Transparansi anggaran DLH.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("Kajian", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="search"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Kajian</div>
|
||||
<p class="text-sm text-gray-500">Kajian ilmiah terkait lingkungan.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="leaf"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Keanekaragaman Hayati</div>
|
||||
<p class="text-sm text-gray-500">Data flora dan fauna di wilayah setempat.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("GasRumahKaca", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="cloud"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Gas Rumah Kaca</div>
|
||||
<p class="text-sm text-gray-500">Data terkait emisi gas rumah kaca.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("KLHS", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="clipboard-check"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">KLHS</div>
|
||||
<p class="text-sm text-gray-500">Kajian Lingkungan Hidup Strategis.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("MonitoringEmisi", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="factory"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Monitoring Emisi Sumber Tidak Bergerak</div>
|
||||
<p class="text-sm text-gray-500">Data emisi dari sumber tetap seperti industri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("LaporanKualitasUdara", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="wind"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">Laporan Kualitas Udara</div>
|
||||
<p class="text-sm text-gray-500">Hasil pemantauan kualitas udara.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="@Url.Action("IKLH", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
|
||||
<div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="bar-chart"></i></div>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 hover:text-orange-700">IKLH</div>
|
||||
<p class="text-sm text-gray-500">Indeks Kualitas Lingkungan Hidup.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
|
||||
<footer class="bg-orange-500 pt-8">
|
||||
<footer class="bg-oren pt-8">
|
||||
<!-- Main Footer Section -->
|
||||
<div class="relative max-w-6xl bg-gradient-to-r from-green-600 to-emerald-700 rounded-2xl mx-auto overflow-hidden shadow-2xl">
|
||||
<div class="relative max-w-6xl bg-ijo rounded-2xl mx-auto overflow-hidden shadow-2xl">
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<div class="absolute inset-0"
|
||||
style="background-image: url('@Url.Content("~/assets/images/home/bg-green.png")'); background-size: cover; background-position: center;"></div>
|
||||
style="background-image: url('@Url.Content("~/assets/images/home/bg-green.png")'); background-size: fit; background-position: bottom; background-repeat: no-repeat;"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-emerald-800/30"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="relative justify-center items-end hidden md:flex">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-white/20 rounded-full blur-3xl transform scale-300"></div>
|
||||
<img src="@Url.Content("~/assets/images/home/monas.svg")" alt="Monas Jakarta" class="relative z-10 max-w-full h-auto max-h-5 md:max-h-7 drop-shadow-2xl">
|
||||
<img src="@Url.Content("~/assets/images/home/monas.svg")" alt="Monas Jakarta" class="relative z-10 max-w-full drop-shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Section 2: Tentang Kami dan Layanan -->
|
||||
<div class="bg-orange-500 py-8">
|
||||
<div class="bg-[#f49827] py-8">
|
||||
<div class="container max-w-6xl mx-auto px-4">
|
||||
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center text-white space-y-8 lg:space-y-0">
|
||||
<!-- Tentang Kami -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
<footer class="bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50 border-t-4 border-green-500 relative overflow-hidden">
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<div class="absolute top-0 left-0 w-64 h-64 bg-green-600 rounded-full -translate-x-32 -translate-y-32"></div>
|
||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-emerald-600 rounded-full translate-x-48 translate-y-48"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Footer Section -->
|
||||
<div class="py-16 relative z-10">
|
||||
<div class="container max-w-6xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-8">
|
||||
<!-- Logo & Description -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-green-500 rounded-xl blur-sm opacity-30"></div>
|
||||
<img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" class="h-14 relative z-10 drop-shadow-lg" alt="DLH Logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-1">DLH</h3>
|
||||
<p class="text-sm text-green-700 font-medium">Provinsi DKI Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 text-sm leading-relaxed font-light"></p>
|
||||
Dinas Lingkungan Hidup Provinsi DKI Jakarta berkomitmen menjaga kelestarian lingkungan untuk Jakarta yang berkelanjutan.
|
||||
</p>
|
||||
<div class="flex space-x-3 mt-4">
|
||||
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
||||
<i class="text-white w-4 h-4" data-lucide="facebook"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
||||
<i class="text-white w-4 h-4" data-lucide="instagram"></i>
|
||||
</a>
|
||||
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
||||
<i class="text-white w-4 h-4" data-lucide="youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tentang Kami -->
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
||||
<span class="border-b-2 border-green-500 pb-1">Tentang Kami</span>
|
||||
</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Visi Misi</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Struktur Organisasi</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Sejarah</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Profil Pimpinan</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Layanan -->
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
||||
<span class="border-b-2 border-green-500 pb-1">Layanan</span>
|
||||
</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Penjemputan e-Waste</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Bulky Waste</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Uji Sampel Laboratorium</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">AMDAL</a></li>
|
||||
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Whistleblowing System</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Kontak -->
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
||||
<span class="border-b-2 border-green-500 pb-1">Kontak Kami</span>
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-3 group">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
||||
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="map-pin"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-700 font-medium leading-relaxed">
|
||||
Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Jakarta Timur 13640
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 group">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
||||
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="phone"></i>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">(021) 8092744</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 group">
|
||||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
||||
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="mail"></i>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">dinaslh@jakarta.go.id</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="bg-gradient-to-r from-green-600 to-emerald-600 py-6 relative z-10">
|
||||
<div class="container max-w-6xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
|
||||
<p class="text-sm text-green-50 font-medium">
|
||||
© @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
|
||||
</p>
|
||||
<div class="flex space-x-6">
|
||||
<a href="#" class="text-sm text-green-100 hover:text-white transition-colors duration-300 font-medium relative after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-white after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">Privacy Policy</a>
|
||||
<a href="#" class="text-sm text-green-100 hover:text-white transition-colors duration-300 font-medium relative after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-white after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -13,11 +13,10 @@
|
|||
|
||||
<!-- Mobile menu button -->
|
||||
<button id="mobile-drawer-button" type="button"
|
||||
class="inline-flex items-center p-2 ml-3 text-gray-700 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-400"
|
||||
class="inline-flex items-center p-2 ml-3 text-gray-700 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-400 transition-colors duration-200"
|
||||
aria-controls="mobile-drawer" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<i class="w-5 h-5" data-lucide="menu"></i>
|
||||
|
||||
<i id="menu-icon" class="w-6 h-6 transition-transform duration-300" data-lucide="menu"></i>
|
||||
</button>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
|
|
@ -48,6 +47,160 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Drawer Overlay -->
|
||||
<div id="mobile-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden hidden transition-opacity duration-300"></div>
|
||||
|
||||
<!-- Mobile Drawer -->
|
||||
<div id="mobile-drawer" class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 md:hidden">
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="@Url.Content("~/logo-dlh.png")" class="h-8" alt="DLH Logo" />
|
||||
<span class="text-lg font-bold text-gray-900">DLH Jakarta</span>
|
||||
</div>
|
||||
<button id="mobile-drawer-close" class="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
|
||||
<i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Menu Content -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="p-4 space-y-2">
|
||||
<!-- Beranda -->
|
||||
<a href="@Url.Action("Index", "Home")" class="flex items-center gap-3 p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200">
|
||||
<i class="w-5 h-5" data-lucide="home"></i>
|
||||
<span class="font-medium">Beranda</span>
|
||||
</a>
|
||||
|
||||
@* Mobile Menu Items *@
|
||||
@{
|
||||
var mobileMenus = new[] {
|
||||
new { Name = "Program", Icon = "briefcase" },
|
||||
new { Name = "Profil", Icon = "building" },
|
||||
new { Name = "Publikasi Data", Icon = "database" },
|
||||
new { Name = "Layanan", Icon = "star" },
|
||||
new { Name = "Seputar DLH", Icon = "info" }
|
||||
};
|
||||
}
|
||||
|
||||
@for (int i = 0; i < mobileMenus.Length; i++)
|
||||
{
|
||||
<div class="mobile-menu-item">
|
||||
<button class="mobile-dropdown-toggle flex items-center justify-between w-full p-3 rounded-lg hover:bg-orange-50 hover:text-orange-600 transition-colors duration-200" data-target="mobile-submenu-@(i + 1)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="w-5 h-5" data-lucide="@mobileMenus[i].Icon"></i>
|
||||
<span class="font-medium">@mobileMenus[i].Name</span>
|
||||
</div>
|
||||
<i class="w-5 h-5 transition-transform duration-200" data-lucide="chevron-down"></i>
|
||||
</button>
|
||||
<div id="mobile-submenu-@(i + 1)" class="hidden pl-8 pb-2 space-y-1">
|
||||
@if (i == 0) // Program
|
||||
{
|
||||
<a href="@Url.Action("Udara", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Udara</a>
|
||||
<a href="@Url.Action("Air", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Air</a>
|
||||
<a href="@Url.Action("Sampah", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Sampah</a>
|
||||
<a href="@Url.Action("LKIP", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">LKIP</a>
|
||||
<a href="@Url.Action("Pengawasan", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Pengawasan</a>
|
||||
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Perjanjian Kinerja</a>
|
||||
<a href="@Url.Action("RencanaStrategis", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Rencana Strategis</a>
|
||||
<a href="@Url.Action("Anggaran", "Program")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Anggaran</a>
|
||||
}
|
||||
else if (i == 1) // Profil
|
||||
{
|
||||
<a href="@Url.Action("Organisasi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Struktur Organisasi</a>
|
||||
<a href="@Url.Action("Bidang", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bidang & UPT</a>
|
||||
<a href="@Url.Action("Tupoksi", "Profil")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Tupoksi</a>
|
||||
}
|
||||
else if (i == 2) // Publikasi Data
|
||||
{
|
||||
<a href="@Url.Action("DIKPLHD", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">DIKPLH</a>
|
||||
<a href="@Url.Action("Peraturan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Peraturan</a>
|
||||
<a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Kualitas Air</a>
|
||||
<a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Laporan Keuangan</a>
|
||||
<a href="@Url.Action("Kajian", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kajian</a>
|
||||
<a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Keanekaragaman Hayati</a>
|
||||
}
|
||||
else if (i == 3) // Layanan
|
||||
{
|
||||
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">AMDAL</a>
|
||||
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">PPID</a>
|
||||
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Bulky Waste</a>
|
||||
}
|
||||
else if (i == 4) // Seputar DLH
|
||||
{
|
||||
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Berita</a>
|
||||
<a href="#" class="block p-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded transition-colors duration-200">Kontak Kami</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<div class="text-center text-sm text-gray-500">
|
||||
<p>© @DateTime.Now.Year DLH DKI Jakarta</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const mobileButton = document.getElementById('mobile-drawer-button');
|
||||
const mobileDrawer = document.getElementById('mobile-drawer');
|
||||
const mobileOverlay = document.getElementById('mobile-overlay');
|
||||
const mobileClose = document.getElementById('mobile-drawer-close');
|
||||
const menuIcon = document.getElementById('menu-icon');
|
||||
|
||||
function openDrawer() {
|
||||
mobileDrawer.classList.remove('translate-x-full');
|
||||
mobileOverlay.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
menuIcon.setAttribute('data-lucide', 'x');
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
mobileDrawer.classList.add('translate-x-full');
|
||||
mobileOverlay.classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
menuIcon.setAttribute('data-lucide', 'menu');
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
mobileButton.addEventListener('click', function() {
|
||||
if (mobileDrawer.classList.contains('translate-x-full')) {
|
||||
openDrawer();
|
||||
} else {
|
||||
closeDrawer();
|
||||
}
|
||||
});
|
||||
|
||||
mobileClose.addEventListener('click', closeDrawer);
|
||||
mobileOverlay.addEventListener('click', closeDrawer);
|
||||
|
||||
// Mobile dropdown toggles
|
||||
document.querySelectorAll('.mobile-dropdown-toggle').forEach(toggle => {
|
||||
toggle.addEventListener('click', function() {
|
||||
const targetId = this.getAttribute('data-target');
|
||||
const submenu = document.getElementById(targetId);
|
||||
const chevron = this.querySelector('[data-lucide="chevron-down"]');
|
||||
|
||||
if (submenu.classList.contains('hidden')) {
|
||||
submenu.classList.remove('hidden');
|
||||
chevron.style.transform = 'rotate(180deg)';
|
||||
} else {
|
||||
submenu.classList.add('hidden');
|
||||
chevron.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,8 +44,11 @@
|
|||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
|
||||
@* <link rel="stylesheet" href="~/css/output.css" asp-append-version="true" /> *@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/css/output.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
|
||||
|
||||
@await RenderSectionAsync("css", required: false)
|
||||
|
|
@ -58,8 +61,6 @@
|
|||
|
||||
<main>
|
||||
@RenderBody()
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<partial name="~/Views/Shared/Partials/_Footer.cshtml" />
|
||||
|
|
@ -67,7 +68,6 @@
|
|||
<!-- Tailwind CSS CDN -->
|
||||
@* <script src="https://cdn.jsdelivr.net/npm/@@tailwindcss/browser@4"></script> *@
|
||||
|
||||
|
||||
<!-- Section script stack -->
|
||||
<partial name="~/Views/Shared/Partials/_Scripts.cshtml" />
|
||||
@await RenderSectionAsync("scripts", required: false)
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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")]
|
||||
[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+665891422ccffa3c6e96f0313d577403f991b334")]
|
||||
[assembly: System.Reflection.AssemblyProductAttribute("dlh-net")]
|
||||
[assembly: System.Reflection.AssemblyTitleAttribute("dlh-net")]
|
||||
[assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
d1f1f3526c493cfb63711702f4349335bab6f319385d160a25b24f3f437a2894
|
||||
625f3fee7964815f9ab85d6aa909a52c7e43fda62a11949ed413c8c059a5798b
|
||||
|
|
|
|||
|
|
@ -40,14 +40,26 @@ build_metadata.AdditionalFiles.CssScope =
|
|||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9MYXlhbmFuLmNzaHRtbA==
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Mitra.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9NaXRyYS5jc2h0bWw=
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Slider.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9TbGlkZXIuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Slidercop.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9TbGlkZXJjb3AuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Sosmed.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9Tb3NtZWQuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Video.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9WaWRlby5jc2h0bWw=
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Components/Home/_Website.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9XZWJzaXRlLmNzaHRtbA==
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
|
@ -108,6 +120,14 @@ build_metadata.AdditionalFiles.CssScope =
|
|||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXERpa3BsaGQuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Publikasi/LaporanKualitasAir.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXExhcG9yYW5LdWFsaXRhc0Fpci5jc2h0bWw=
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Publikasi/Peraturan.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXFBlcmF0dXJhbi5jc2h0bWw=
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Shared/Error.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcU2hhcmVkXEVycm9yLmNzaHRtbA==
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
|
@ -140,6 +160,10 @@ build_metadata.AdditionalFiles.CssScope =
|
|||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcU2hhcmVkXFBhcnRpYWxzXF9Gb290ZXIuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Shared/Partials/_Footercop.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcU2hhcmVkXFBhcnRpYWxzXF9Gb290ZXJjb3AuY3NodG1s
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
||||
[C:/laragon/www/dlh-net/Views/Shared/Partials/_Head.cshtml]
|
||||
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcU2hhcmVkXFBhcnRpYWxzXF9IZWFkLmNzaHRtbA==
|
||||
build_metadata.AdditionalFiles.CssScope =
|
||||
|
|
|
|||
|
|
@ -110,9 +110,7 @@ C:\laragon\www\dlh-net\obj\Debug\net9.0\dlh-net.genruntimeconfig.cache
|
|||
C:\laragon\www\dlh-net\obj\Debug\net9.0\ref\dlh-net.dll
|
||||
C:\laragon\www\dlh-net\bin\Debug\net9.0\package-lock.json
|
||||
C:\laragon\www\dlh-net\bin\Debug\net9.0\package.json
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\1eirg8gji5-6h6v874upz.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\7wi42j59di-t9gwqzjizw.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-wh9njmnfyc.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\wx4sndr29h-wyae1n2fs8.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\1lfsr6bmfy-hwljaxtgfw.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\6lyzddjh34-dsp8af4m4y.gz
|
||||
|
|
@ -6417,3 +6415,6 @@ C:\laragon\www\dlh-net\bin\Debug\net9.0\publish\wwwroot\lib\lucide\icon-nodes.js
|
|||
C:\laragon\www\dlh-net\bin\Debug\net9.0\publish\wwwroot\lib\lucide\package.json
|
||||
C:\laragon\www\dlh-net\bin\Debug\net9.0\publish\wwwroot\lib\lucide\tags.json
|
||||
C:\laragon\www\dlh-net\bin\Debug\net9.0\publish\wwwroot\lib\lucide\tsconfig.json
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\whdzgwhwig-52k9nfb9i9.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\1eirg8gji5-b8vwsgm4sc.gz
|
||||
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-cidzcx1dis.gz
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
7O8tWsaAxSMia5g5hIjEHx+2xH9z1ls6CAJvp8gPJs0=
|
||||
5ZXiovAFurLtYAVgfPmzavOxv0O3NVdCftEvchAvAT0=
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 933 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -1 +1,21 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
.font-sans {
|
||||
font-family: "Instrument Sans", sans-serif;
|
||||
}
|
||||
|
||||
.bg-oren {
|
||||
background-color: #f49827;
|
||||
}
|
||||
|
||||
.bg-ijo {
|
||||
background-color: #009d68;
|
||||
}
|
||||
|
||||
.text-oren {
|
||||
color: #f49827;
|
||||
}
|
||||
|
||||
.text-ijo {
|
||||
color: #009d68;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue