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

update navbar menu + mobile |

main
marszayn 2025-06-16 11:46:35 +07:00
parent 85e3530e9a
commit c2619f01a9
56 changed files with 4444 additions and 1142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

332
Views/Components/Home/_Informasi.cshtml
View File

@ -41,7 +41,7 @@
<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="text-left card-content-info 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">Ton</div>
@ -76,7 +76,7 @@
<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="text-left card-content-info 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>
@ -111,7 +111,7 @@
<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="text-left card-content-info 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>
@ -146,7 +146,7 @@
<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="text-left card-content-info 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>
@ -377,16 +377,18 @@
<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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
AOS.init();
gsap.registerPlugin(ScrollTrigger);
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Rolling numbers animation
const rollingNumbers = document.querySelectorAll(".rolling-number");
const infoCards = document.querySelectorAll(".info-card");
const rollingNumbers = document.querySelectorAll('.rolling-number');
const infoCards = document.querySelectorAll('.info-card');
// Add 3D card effect
infoCards.forEach(card => {
@ -547,7 +549,182 @@ document.addEventListener("DOMContentLoaded", function () {
return tl;
}
// Observer for rolling numbers
// Scroll-triggered card expansion
infoCards.forEach((card, index) => {
ScrollTrigger.create({
trigger: card,
start: "top 85%",
end: "bottom 15%",
onEnter: () => {
// Slower delay for smoother expansion - increased from 0.2 to 0.5
gsap.delayedCall(index * 0.5, () => {
expandCard(card);
});
},
onLeave: () => {
// Collapse when scrolling down past the card
gsap.delayedCall(index * 0.1, () => {
collapseCard(card);
});
},
onEnterBack: () => {
// Re-expand when scrolling back up into view with slower timing
gsap.delayedCall(index * 0.3, () => {
expandCard(card);
});
},
onLeaveBack: () => {
// Collapse when scrolling up past the card
gsap.delayedCall(index * 0.1, () => {
collapseCard(card);
});
}
});
});
function expandCard(card) {
if (card.classList.contains('expanded')) return;
const content = card.querySelector('.card-content-info');
const iconContainer = card.querySelector('.icon-container');
const iconBlob = card.querySelector('.icon-blob');
// Mark as expanded
card.classList.add('expanded');
// Initialize particle animation property if not exists
if (!card._particleAnimation) {
card._particleAnimation = null;
}
// Slower, more smooth expansion animation
gsap.to(card, {
height: 240,
rotateX: 0,
rotateY: 0,
duration: 0.8, // Increased from 0.5 to 0.8
ease: "power2.out" // Changed to smoother easing
});
// Animate icon with bounce - slower timing
gsap.to(iconContainer, {
scale: 1.2,
y: -5,
duration: 0.8, // Increased from 0.5 to 0.8
ease: "back.out(1.2)" // Less aggressive bounce
});
// Animate icon blob - slower
gsap.to(iconBlob, {
scale: 2,
opacity: 0.15,
duration: 0.7, // Increased from 0.5 to 0.7
ease: "power2.out"
});
// Fade in content with longer delay and stagger
const contentElements = content.children;
gsap.to(content, {
opacity: 1,
duration: 0.2, // Increased from 0.1 to 0.2
delay: 0.4 // Increased from 0.2 to 0.4
});
gsap.fromTo(contentElements,
{ y: 20, opacity: 0 }, // Increased y from 15 to 20
{
y: 0,
opacity: 1,
duration: 0.6, // Increased from 0.4 to 0.6
stagger: 0.15, // Increased from 0.1 to 0.15
delay: 0.4, // Increased from 0.2 to 0.4
ease: "power2.out" // Smoother easing
}
);
// Start particle animation for this card only
card._particleAnimation = animateParticles(card);
// Activate rolling numbers if they're in this card with delay
setTimeout(() => {
const cardNumbers = card.querySelectorAll('.rolling-number');
cardNumbers.forEach(number => {
const target = parseInt(number.getAttribute("data-target"));
let current = 0;
const increment = target / 90; // Slower rolling - increased from 60 to 90
const updateNumber = () => {
current += increment;
if (current < target) {
number.textContent = Math.floor(current);
requestAnimationFrame(updateNumber);
} else {
number.textContent = target;
}
};
updateNumber();
});
}, 500); // Delay rolling numbers by 500ms
}
function collapseCard(card) {
if (!card.classList.contains('expanded')) return;
const content = card.querySelector('.card-content-info');
const iconContainer = card.querySelector('.icon-container');
const iconBlob = card.querySelector('.icon-blob');
// Smooth collapse animation
gsap.to(card, {
height: 140,
rotateX: 0,
rotateY: 0,
clearProps: "transform",
duration: 0.6, // Increased from 0.5 to 0.6
ease: "power2.inOut", // Smoother easing
onComplete: () => {
card.classList.remove('expanded');
}
});
// Reset icon animation - slower
gsap.to(iconContainer, {
scale: 1,
y: 0,
duration: 0.6, // Increased from 0.5 to 0.6
ease: "power2.inOut"
});
// Reset icon blob - slower
gsap.to(iconBlob, {
scale: 0,
opacity: 0,
duration: 0.4, // Increased from 0.3 to 0.4
ease: "power2.inOut"
});
// Fade out content - faster but smoother
gsap.to(content, {
opacity: 0,
duration: 0.3,
ease: "power2.inOut"
});
// Stop particle animation if it exists
if (card._particleAnimation) {
card._particleAnimation.kill();
card._particleAnimation = null;
}
// Reset rolling numbers
const cardNumbers = card.querySelectorAll('.rolling-number');
cardNumbers.forEach(number => {
number.textContent = '0';
});
}
// Observer for rolling numbers (keep existing)
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
@ -576,148 +753,37 @@ document.addEventListener("DOMContentLoaded", function () {
observer.observe(number);
});
// Card click handlers with GSAP animation - Modified for independent toggling
// Modified card click handlers - now only for collapsing
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
// Only allow collapsing if already expanded
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();
});
collapseCard(this);
}
});
});
// Add tooltip functionality
// Add tooltip functionality (keep existing)
infoCards.forEach(card => {
// Set aria attributes for accessibility
card.setAttribute('aria-label', 'Klik untuk detail informasi');
card.setAttribute('role', 'button');
card.setAttribute('aria-label', 'Kartu informasi akan terbuka otomatis saat scroll');
card.setAttribute('role', 'region');
card.setAttribute('tabindex', '0');
// Support keyboard interaction
// Support keyboard interaction for collapsing
card.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
if ((e.key === 'Enter' || e.key === ' ') && this.classList.contains('expanded')) {
e.preventDefault();
this.click();
collapseCard(this);
}
});
// Update tooltip text
const tooltip = card.querySelector('.tooltip span');
if (tooltip) {
tooltip.textContent = 'Klik untuk tutup detail';
}
// Hide tooltip when card is expanded
card.addEventListener('click', function() {
const tooltip = this.querySelector('.tooltip');

2
Views/Components/Home/_Layanan.cshtml
View File

@ -317,7 +317,7 @@
});
setActiveService(activeService);
startAutoplay();
@* startAutoplay(); *@
const style = document.createElement("style");
style.innerHTML = `

18
Views/Components/Home/_Slider.cshtml
View File

@ -1,4 +1,4 @@
<div class="relative min-h-screen overflow-hidden md:pt-12">
<section id="section1" 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>
@ -9,6 +9,11 @@
</div>
</div>
<!-- Background Image -->
@* <div class="absolute inset-0 opacity-20">
<img src="@Url.Content("~/assets/images/home/pancoran-bg.svg")" alt="Background" class="w-full h-full object-cover object-center">
</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">
@ -23,8 +28,8 @@
</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>
<span id="typing-text" class="bg-oren bg-clip-text text-transparent text-3xl sm:text-4xl md:text-6xl font-bold"></span>
<span id="cursor" class="text-3xl sm:text-4xl md:text-6xl 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">
@ -35,16 +40,13 @@
</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="select-none w-full flex items-center justify-center py-8 overflow-x-hidden max-w-7xl mx-auto">
<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>
@ -118,7 +120,7 @@
<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>
</section>
<register-block dynamic-section="css" key="cssSlider">
<style>

360
Views/Components/Home/_Slider_copy.cshtml 100644
View File

@ -0,0 +1,360 @@
<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>
<!-- Background Image -->
<div class="absolute inset-0 opacity-20">
<img src="@Url.Content("~/assets/images/home/pancoran-bg.svg")" alt="Background" class="w-full h-full object-cover object-center">
</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-7xl mx-auto">
<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>
<!-- 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="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 - 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>
<!-- 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="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 - 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>
<!-- 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="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 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, 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"
});
});
// Mobile animations
if (isMobile) {
gsap.to(items, {
height: item.clicked ? "18vh" : "12vh",
duration: 1.3,
ease: "elastic(1, .6)",
});
item.clicked = !item.clicked;
gsap.to(item, {
height: item.clicked ? "38vh" : "18vh",
duration: 1.6,
ease: "elastic(1, .3)",
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)"
});
}
// Desktop animations
else {
gsap.to(items, {
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 ? "calc(50% - 1rem)" : "calc(33.333% - 1rem)",
duration: 1.8,
ease: "elastic(1, .3)",
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,
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.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,
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,
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" });
}
});
});
// Enhanced entrance animations
gsap.fromTo(
items,
{ opacity: 0, y: 50, scale: 0.9 },
{
opacity: 1,
y: 0,
scale: 1,
duration: 1.2,
stagger: 0.25,
ease: "back.out(1.7)",
delay: 0.8
}
);
// 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>

861
Views/Components/Home/_Sosmed.cshtml
View File

File diff suppressed because it is too large Load Diff

6
Views/Components/Home/_Website.cshtml
View File

@ -7,9 +7,9 @@
<div id="particle-container" class="absolute inset-0"></div>
</div>
<div class="container mx-auto px-4 max-w-7xl relative z-10">
<div class="container mx-auto px-4 max-w-5xl relative z-10">
<!-- Heading Section with animated underline -->
<div class="text-center mb-20">
<div class="text-center">
<div class="inline-block relative">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">
Layanan Digital
@ -25,7 +25,7 @@
<!-- 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-viewport relative max-w-3xl mx-auto h-[300px] 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>

6
Views/Home/Index.cshtml
View File

@ -10,11 +10,11 @@
ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
}
<partial name="~/Views/Components/Home/_Slider.cshtml" />
<partial name="~/Views/Components/Home/_Slider.cshtml"/>
<partial name="~/Views/Components/Home/_Layanan.cshtml" />
<partial name="~/Views/Components/Home/_Informasi.cshtml" />
<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/_Mitra.cshtml" />
<partial name="~/Views/Components/Home/_Video.cshtml" />
<partial name="~/Views/Components/Home/_Sosmed.cshtml" />
<partial name="~/Views/Components/Home/_Sosmed.cshtml" />

100
Views/Layanan/Whistleblowing.cshtml 100644
View File

@ -0,0 +1,100 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Whistleblowing System - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Sistem pelaporan pelanggaran lingkungan untuk masyarakat dalam melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup.";
ViewData["Keywords"] = "Whistleblowing System, Pelaporan Pelanggaran Lingkungan, Laporan Pencemaran, Aduan Lingkungan, Sistem Pelaporan, Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgTitle"] = "Whistleblowing System - Sistem Pelaporan Pelanggaran Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.";
ViewData["TwitterTitle"] = "Whistleblowing System - Sistem Pelaporan Pelanggaran Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.";
// Breadcumb
ViewData["BreadcrumbText"] = "Whistleblowing System";
ViewData["TitleBeforeHighlight"] = "WHISTLEBLOWING";
ViewData["TitleHighlight"] = "SYSTEM";
}
<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
<div class="container mx-auto max-w-6xl py-8">
<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">Whistleblowing System</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.
</p>
</div>
</div>
</div>
<!-- Report Section -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
<div class="flex items-start space-x-6">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
</svg>
</div>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-800 mb-3">Laporkan Dugaan PUNGLI</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
Jika anda menemukan <span class="font-semibold text-red-600">PUNGLI</span> di Dinas Lingkungan Hidup DKI Jakarta, silahkan laporkan melalui:
</p>
<div class="space-y-4">
<!-- Email Report -->
<div class="flex items-center p-4 bg-blue-50 rounded-lg border border-blue-200">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-4">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<p class="text-sm text-gray-600 mb-1">Kirim email ke:</p>
<a href="mailto:dinaslh@jakarta.go.id" class="text-blue-600 font-semibold hover:text-blue-800 transition-colors">
dinaslh@jakarta.go.id
</a>
</div>
</div>
<!-- Link Report -->
<div class="flex items-center p-4 bg-green-50 rounded-lg border border-green-200">
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
</svg>
</div>
<div>
<p class="text-sm text-gray-600 mb-1">Atau akses melalui link:</p>
<a href="https://bit.ly/wbsdlhdki" target="_blank"
class="inline-flex items-center text-green-600 font-semibold hover:text-green-800 transition-colors">
https://bit.ly/wbsdlhdki
<svg class="w-4 h-4 ml-1" 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>
<!-- Privacy Notice -->
<div class="mt-6 p-4 bg-gray-50 rounded-lg border-l-4 border-blue-500">
<div class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-sm text-gray-600">
<span class="font-semibold">Jaminan Kerahasiaan:</span> Identitas pelapor akan dijaga kerahasiaannya dan dilindungi sesuai ketentuan peraturan perundang-undangan yang berlaku.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

146
Views/Publikasi/GasRumahKaca.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Gas Rumah Kaca - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Informasi lengkap mengenai Gas Rumah Kaca di DKI Jakarta. Temukan data emisi, inventarisasi, dan upaya mitigasi gas rumah kaca yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["Keywords"] = "Gas Rumah Kaca, Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
ViewData["OgTitle"] = "Gas Rumah Kaca - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Informasi lengkap mengenai Gas Rumah Kaca di DKI Jakarta. Temukan data emisi, inventarisasi, dan upaya mitigasi gas rumah kaca yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["TwitterTitle"] = "Gas Rumah Kaca - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Informasi lengkap mengenai Gas Rumah Kaca di DKI Jakarta. Temukan data emisi, inventarisasi, dan upaya mitigasi gas rumah kaca yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
// Breadcumb
ViewData["BreadcrumbText"] = "Gas Rumah Kaca";
ViewData["TitleBeforeHighlight"] = "Gas Rumah";
ViewData["TitleHighlight"] = "Kaca";
}
<!-- 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">Gas Rumah Kaca</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Informasi lengkap mengenai Gas Rumah Kaca di DKI Jakarta. Temukan data emisi, inventarisasi, dan upaya mitigasi gas rumah kaca yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/IKLH.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";
ViewData["Keywords"] = "Indeks Kualitas Lingkungan Hidup (IKLH), Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
ViewData["OgTitle"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";
ViewData["TwitterTitle"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";
// Breadcumb
ViewData["BreadcrumbText"] = "Indeks Kualitas Lingkungan Hidup (IKLH)";
ViewData["TitleBeforeHighlight"] = "Indeks Kualitas";
ViewData["TitleHighlight"] = "Lingkungan Hidup (IKLH)";
}
<!-- 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">Indeks Kualitas Lingkungan Hidup (IKLH)</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/KLHS.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Kajian Lingkungan Hidup Strategis (KLHS) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Dokumen Kajian Lingkungan Hidup Strategis (KLHS) DKI Jakarta. Temukan informasi lengkap mengenai evaluasi dampak lingkungan strategis, kebijakan pembangunan berkelanjutan, dan upaya perlindungan lingkungan hidup di Jakarta.";
ViewData["Keywords"] = "Kajian Lingkungan Hidup Strategis (KLHS), KLHS Jakarta, Evaluasi Dampak Lingkungan, Pembangunan Berkelanjutan, Perlindungan Lingkungan, Jakarta";
ViewData["OgTitle"] = "Kajian Lingkungan Hidup Strategis (KLHS) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Dokumen Kajian Lingkungan Hidup Strategis (KLHS) DKI Jakarta. Temukan informasi lengkap mengenai evaluasi dampak lingkungan strategis, kebijakan pembangunan berkelanjutan, dan upaya perlindungan lingkungan hidup di Jakarta.";
ViewData["TwitterTitle"] = "Kajian Lingkungan Hidup Strategis (KLHS) - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Dokumen Kajian Lingkungan Hidup Strategis (KLHS) DKI Jakarta. Temukan informasi lengkap mengenai evaluasi dampak lingkungan strategis, kebijakan pembangunan berkelanjutan, dan upaya perlindungan lingkungan hidup di Jakarta.";
// Breadcumb
ViewData["BreadcrumbText"] = "Kajian Lingkungan Hidup Strategis (KLHS)";
ViewData["TitleBeforeHighlight"] = "Kajian Lingkungan";
ViewData["TitleHighlight"] = "Hidup Strategis";
}
<!-- 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">Kajian Lingkungan Hidup Strategis (KLHS)</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Dokumen Kajian Lingkungan Hidup Strategis (KLHS) DKI Jakarta. Temukan informasi lengkap mengenai evaluasi dampak lingkungan strategis, kebijakan pembangunan berkelanjutan, dan upaya perlindungan lingkungan hidup di Jakarta.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/Kajian.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Kajian - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Kumpulan kajian dan penelitian terkait lingkungan hidup yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan hasil kajian ilmiah, analisis dampak lingkungan, dan studi evaluasi kualitas lingkungan.";
ViewData["Keywords"] = "Kajian, Regulasi Lingkungan, Kualitas Air, Data Lingkungan, Jakarta";
ViewData["OgTitle"] = "Kajian - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Kumpulan kajian dan penelitian terkait lingkungan hidup yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan hasil kajian ilmiah, analisis dampak lingkungan, dan studi evaluasi kualitas lingkungan.";
ViewData["TwitterTitle"] = "Kajian - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Kumpulan kajian dan penelitian terkait lingkungan hidup yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan hasil kajian ilmiah, analisis dampak lingkungan, dan studi evaluasi kualitas lingkungan.";
// Breadcumb
ViewData["BreadcrumbText"] = "Kajian";
ViewData["TitleBeforeHighlight"] = "Kajian";
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">Kajian Terkait Lingkungan Hidup</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Kumpulan kajian dan penelitian terkait lingkungan hidup yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan hasil kajian ilmiah, analisis dampak lingkungan, dan studi evaluasi kualitas lingkungan.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/KeanekaragamanHayati.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["Keywords"] = "Keanekaragaman Hayati, Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
ViewData["OgTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["TwitterTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
// Breadcumb
ViewData["BreadcrumbText"] = "Keanekaragaman Hayati";
ViewData["TitleBeforeHighlight"] = "Keanekaragaman";
ViewData["TitleHighlight"] = "Hayati";
}
<!-- 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">Keanekaragaman Hayati</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/LaporanKualitasUdara.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Pemantauan Kualitas Udara - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Pemantauan kualitas udara DKI Jakarta untuk mengukur tingkat pencemaran dan kualitas udara ambien melalui Indeks Kualitas Udara (IKU) untuk menjaga kesehatan masyarakat.";
ViewData["Keywords"] = "Pemantauan Kualitas Udara, IKU, Indeks Kualitas Udara, PM2.5, PM10, Polusi Udara Jakarta, Kualitas Udara Ambien, Pencemaran Udara";
ViewData["OgTitle"] = "Pemantauan Kualitas Udara - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Pemantauan kualitas udara DKI Jakarta untuk mengukur tingkat pencemaran dan kualitas udara ambien melalui Indeks Kualitas Udara (IKU) untuk menjaga kesehatan masyarakat.";
ViewData["TwitterTitle"] = "Pemantauan Kualitas Udara - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Pemantauan kualitas udara DKI Jakarta untuk mengukur tingkat pencemaran dan kualitas udara ambien melalui Indeks Kualitas Udara (IKU) untuk menjaga kesehatan masyarakat.";
// Breadcumb
ViewData["BreadcrumbText"] = "Pemantauan Kualitas Udara";
ViewData["TitleBeforeHighlight"] = "Pemantauan Kualitas";
ViewData["TitleHighlight"] = "Udara";
}
<!-- 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">Pemantauan Kualitas Udara</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Pemantauan kualitas udara DKI Jakarta untuk mengukur tingkat pencemaran dan kualitas udara ambien melalui Indeks Kualitas Udara (IKU) untuk menjaga kesehatan masyarakat.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

146
Views/Publikasi/MonitoringEmisi.cshtml 100644
View File

@ -0,0 +1,146 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Monitoring Emisi Sumber Tidak Bergerak - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["Description"] = "Informasi lengkap mengenai monitoring emisi sumber tidak bergerak di DKI Jakarta. Temukan data pemantauan kualitas udara, pengukuran emisi industri, dan program pengendalian pencemaran udara yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["Keywords"] = "Monitoring Emisi Sumber Tidak Bergerak, Kualitas Udara Jakarta, Pemantauan Emisi, Pencemaran Udara, Industri Jakarta";
ViewData["OgTitle"] = "Monitoring Emisi Sumber Tidak Bergerak - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["OgDescription"] = "Informasi lengkap mengenai monitoring emisi sumber tidak bergerak di DKI Jakarta. Temukan data pemantauan kualitas udara, pengukuran emisi industri, dan program pengendalian pencemaran udara yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
ViewData["TwitterTitle"] = "Monitoring Emisi Sumber Tidak Bergerak - Dinas Lingkungan Hidup DKI Jakarta";
ViewData["TwitterDescription"] = "Informasi lengkap mengenai monitoring emisi sumber tidak bergerak di DKI Jakarta. Temukan data pemantauan kualitas udara, pengukuran emisi industri, dan program pengendalian pencemaran udara yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
// Breadcumb
ViewData["BreadcrumbText"] = "Monitoring Emisi Sumber Tidak Bergerak";
ViewData["TitleBeforeHighlight"] = "Monitoring Emisi";
ViewData["TitleHighlight"] = "Sumber Tidak Bergerak";
}
<!-- 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">Monitoring Emisi Sumber Tidak Bergerak</h1>
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
Informasi lengkap mengenai monitoring emisi sumber tidak bergerak di DKI Jakarta. Temukan data pemantauan kualitas udara, pengukuran emisi industri, dan program pengendalian pencemaran udara yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.
</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-sm 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
</h2>
<div class="flex items-center gap-3">
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
<div class="flex items-center gap-2">
<label class="text-sm font-medium text-gray-700">Filter:</label>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
<option>Semua Tahun</option>
<option>2024</option>
<option>2023</option>
<option>2019</option>
</select>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
</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>
</div>
</div>
</div>
<register-block dynamic-section="css" key="cssDIKPLHD">
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>

224
Views/Publikasi/Peraturan.cshtml
View File

@ -135,102 +135,158 @@
<register-block dynamic-section="scripts" key="jsDIKPLHD">
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Ambil URL dari Razor agar bisa dipakai di JS
// HARDCODE hasil Razor ke dalam string agar tidak error interpretasi JS
const pdfUrl = "@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")";
const imgUrl = "@Url.Content("~/assets/images/dikplhd/buku.jpg")";
<script type="text/javascript">
// Render URL dengan Razor agar tidak terjadi masalah escape karakter
const pdfUrl = "@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")";
const imgUrl = "@Url.Content("~/assets/images/dikplhd/buku.jpg")";
const dokumenHTML = {
"Pengelolaan Limbah B3": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
// Object untuk menyimpan data HTML dokumen berdasarkan kategori
const dokumenHTML = {
"Pengelolaan Limbah B3": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019
</h3>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019
</h3>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019
</h3>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019
</h3>
</div>
`,
"Pengendalian Pencemaran Air": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Panduan Pengendalian Pencemaran Air 2023</h3>
</div>
</div>
`,
"Pengendalian Pencemaran Air": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Panduan Pengendalian Pencemaran Air 2023
</h3>
</div>
`,
"Pengendalian Pencemaran Udara": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Pedoman Pengendalian Udara Bersih 2024</h3>
</div>
</div>
`,
"Pengendalian Pencemaran Udara": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Pedoman Pengendalian Udara Bersih 2024
</h3>
</div>
`,
"Pengelolaan Limbah Padat": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Standar Teknis Pengelolaan Limbah Padat</h3>
</div>
</div>
`,
"Pengelolaan Limbah Padat": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Standar Teknis Pengelolaan Limbah Padat
</h3>
</div>
`,
"Peraturan dan Pedoman Terkait...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Pengendalian Dampak Perubahan Iklim</h3>
</div>
</div>
`,
"Peraturan dan Pedoman Terkait...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Peraturan Pengendalian Dampak Perubahan Iklim
</h3>
</div>
`,
"Peraturan Gubernur Jakarta Sadar...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Gubernur Jakarta Sadar Sampah</h3>
</div>
</div>
`,
"Peraturan Gubernur Jakarta Sadar...": `
<div class="bg-white rounded-xl shadow-sm">
<div class="relative overflow-hidden rounded-lg">
<div class="_df_thumb" source="${pdfUrl}" thumb="${imgUrl}">Klik untuk Lihat & Unduh</div>
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">
Peraturan Gubernur Jakarta Sadar Sampah
</h3>
</div>
`
};
</div>
`
};
$(function() {
function getSelectedKategori() {
let selected = $('#kategoriSelect option:selected').text();
if (selected.startsWith("Peraturan dan Pedoman")) return "Peraturan dan Pedoman Terkait...";
if (selected.startsWith("Peraturan Gubernur Jakarta Sadar")) return "Peraturan Gubernur Jakarta Sadar...";
return selected;
// Fungsi untuk menginisialisasi DFlip
function initializeDFlip() {
setTimeout(function() {
if (typeof DFLIP !== 'undefined') {
// Hapus instance DFlip yang sudah ada
$('._df_thumb').each(function() {
if ($(this).data('dflip')) {
$(this).data('dflip').dispose();
}
});
// Inisialisasi ulang DFlip
DFLIP.parseByClass('_df_thumb');
}
}, 100);
}
// Set kategori dari localStorage jika ada
const savedKategori = localStorage.getItem('selectedKategori');
if (savedKategori) {
$('#kategoriSelect').val(savedKategori);
$('#kategoriLabel').text(savedKategori);
$('#dokumenGrid').html(dokumenHTML[getSelectedKategori()] || '');
}
@*
$('#kategoriSelect').on('change', function() {
const selected = $(this).val();
localStorage.setItem('selectedKategori', selected);
location.reload();
}); *@
$(function () {
// Inisialisasi DFlip saat halaman pertama kali dimuat
initializeDFlip();
// Fungsi untuk mengambil kategori berdasarkan dropdown
function getSelectedKategori() {
let selected = $('#kategoriSelect').val();
if (selected.startsWith("Peraturan dan Pedoman")) return "Peraturan dan Pedoman Terkait...";
if (selected.startsWith("Peraturan Gubernur Jakarta Sadar")) return "Peraturan Gubernur Jakarta Sadar...";
return selected;
}
// Cek localStorage untuk pilihan kategori dan render konten default
const savedKategori = localStorage.getItem('selectedKategori');
if (savedKategori) {
$('#kategoriSelect').val(savedKategori);
$('#kategoriLabel').text(savedKategori);
$('#dokumenGrid').html(dokumenHTML[getSelectedKategori()] || '');
initializeDFlip();
} else {
const defaultKategori = $('#kategoriSelect').val();
$('#kategoriLabel').text(defaultKategori);
$('#dokumenGrid').html(dokumenHTML[getSelectedKategori()] || '');
initializeDFlip();
}
// Event listener ketika dropdown berubah
$('#kategoriSelect').on('change', function () {
const selected = $(this).val();
localStorage.setItem('selectedKategori', selected);
$('#kategoriLabel').text(selected);
// Update konten dokumen dengan proper reinitialization
$('#dokumenGrid').fadeOut(200, function () {
$(this).html(dokumenHTML[getSelectedKategori()] || '').fadeIn(200, function() {
// Inisialisasi ulang DFlip setelah konten dimuat
initializeDFlip();
});
});
});
</script>
});
</script>
</register-block>

69
Views/Shared/Partials/MegaMenus/_MegaMenu2-Profil.cshtml
View File

@ -1,28 +1,67 @@
@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<div id="mega-menu-2" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
<div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Organisasi", "Profil")" 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="users"></i></div>
<div id="mega-menu-2" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Organisasi", "Profil")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="users"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Struktur Organisasi</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Susunan organisasi DLH</p>
</a>
<a href="@Url.Action("Bidang", "Profil")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="building-2"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Bidang & UPT</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi bidang kerja & unit pelaksana teknis DLH</p>
</a>
<a href="@Url.Action("Tupoksi", "Profil")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="clipboard-list"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Tupoksi</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Tugas pokok dan fungsi DLH</p>
</a>
</div>
</div>
</div>
<script>
// Define mobile template for Profil menu
window.profilMobileContent = `
<div class="space-y-3 max-h-[60vh] overflow-y-auto pb-4" style="scrollbar-width: thin; scrollbar-color: #f97316 #f3f4f6;">
<a href="@Url.Action("Organisasi", "Profil")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="users"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Struktur Organisasi</div>
<p class="text-sm text-gray-500">Susunan organisasi DLH.</p>
<span class="font-medium text-gray-900">Struktur Organisasi</span>
<p class="text-sm text-gray-600">Susunan organisasi DLH</p>
</div>
</a>
<a href="@Url.Action("Bidang", "Profil")" 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="building"></i></div>
<a href="@Url.Action("Bidang", "Profil")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="building-2"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Bidang & UPT</div>
<p class="text-sm text-gray-500">Informasi bidang kerja & unit pelaksana teknis DLH.</p>
<span class="font-medium text-gray-900">Bidang & UPT</span>
<p class="text-sm text-gray-600">Informasi bidang kerja</p>
</div>
</a>
<a href="@Url.Action("Tupoksi", "Profil")" 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-list"></i></div>
<a href="@Url.Action("Tupoksi", "Profil")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="clipboard-list"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Tupoksi</div>
<p class="text-sm text-gray-500">Tugas pokok dan fungsi DLH.</p>
<span class="font-medium text-gray-900">Tupoksi</span>
<p class="text-sm text-gray-600">Tugas pokok dan fungsi</p>
</div>
</a>
</div>
</div>
`;
</script>

214
Views/Shared/Partials/MegaMenus/_MegaMenu3-PublikasiData.cshtml
View File

@ -1,84 +1,160 @@
@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<div id="mega-menu-3" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
<div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("DIKPLHD", "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="database"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">DIKPLH</div>
<p class="text-sm text-gray-500">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup.</p>
</div>
<div id="mega-menu-3" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<!-- First row - 6 items -->
<div class="grid grid-cols-2 md:grid-cols-6 gap-4">
<a href="@Url.Action("DIKPLHD", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="database"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">DIKPLH</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup</p>
</a>
<a href="@Url.Action("Peraturan", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="book-open"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Peraturan</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Regulasi terkait lingkungan hidup</p>
</a>
<a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="waves"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Kualitas Air</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi tentang kualitas air</p>
</a>
<a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="dollar-sign"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Keuangan</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Transparansi anggaran DLH</p>
</a>
<a href="@Url.Action("Kajian", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="search"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Kajian</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kajian ilmiah terkait lingkungan</p>
</a>
<a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="leaf"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Keanekaragaman Hayati</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data flora dan fauna di wilayah setempat</p>
</a>
</div>
<!-- Second row - 6 items -->
<div class="grid grid-cols-2 md:grid-cols-6 gap-4 mt-4">
<a href="@Url.Action("GasRumahKaca", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="cloud"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Gas Rumah Kaca</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data terkait emisi gas rumah kaca</p>
</a>
<a href="@Url.Action("KLHS", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="clipboard-check"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">KLHS</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kajian Lingkungan Hidup Strategis</p>
</a>
<a href="@Url.Action("MonitoringEmisi", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="factory"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Monitoring Emisi</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data emisi dari sumber tetap seperti industri</p>
</a>
<a href="@Url.Action("LaporanKualitasUdara", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="wind"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Kualitas Udara</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Hasil pemantauan kualitas udara</p>
</a>
<a href="@Url.Action("IKLH", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="bar-chart"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">IKLH</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Indeks Kualitas Lingkungan Hidup</p>
</a>
<a href="@Url.Action("DataTambahan", "Publikasi")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="chart-line"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Data Lainnya</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data publikasi tambahan</p>
</a>
</div>
</div>
</div>
<script>
// Define mobile template for Publikasi Data menu
window.publikasiDataMobileContent = `
<div class="grid grid-cols-2 gap-2 p-4 border-t border-orange-100">
<a href="@Url.Action("DIKPLHD", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="database"></i>
<span class="text-xs font-medium text-gray-900 text-center">DIKPLHD</span>
</a>
<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 href="@Url.Action("Peraturan", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="book-open"></i>
<span class="text-xs font-medium text-gray-900 text-center">Peraturan</span>
</a>
<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">Laporan Kualitas Air</div>
<p class="text-sm text-gray-500">Informasi tentang kualitas air.</p>
</div>
<a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="waves"></i>
<span class="text-xs font-medium text-gray-900 text-center">Kualitas Air</span>
</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 href="@Url.Action("LaporanKeuangan", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="dollar-sign"></i>
<span class="text-xs font-medium text-gray-900 text-center">Lap. Keuangan</span>
</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 href="@Url.Action("Kajian", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="search"></i>
<span class="text-xs font-medium text-gray-900 text-center">Kajian</span>
</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 href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="leaf"></i>
<span class="text-xs font-medium text-gray-900 text-center">Keanekaragaman</span>
</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 href="@Url.Action("GasRumahKaca", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="cloud"></i>
<span class="text-xs font-medium text-gray-900 text-center">Gas Rumah Kaca</span>
</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 href="@Url.Action("KLHS", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="clipboard-check"></i>
<span class="text-xs font-medium text-gray-900 text-center">KLHS</span>
</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 href="@Url.Action("LaporanKualitasUdara", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="wind"></i>
<span class="text-xs font-medium text-gray-900 text-center">Kualitas Udara</span>
</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 href="@Url.Action("IKLH", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="bar-chart"></i>
<span class="text-xs font-medium text-gray-900 text-center">IKLH</span>
</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 href="@Url.Action("MonitoringEmisi", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600 mb-1" data-lucide="factory"></i>
<span class="text-xs font-medium text-gray-900 text-center">Mon. Emisi</span>
</a>
</div>
</div>
`;
</script>

163
Views/Shared/Partials/MegaMenus/_MegaMenu4-Layanan.cshtml
View File

@ -1,63 +1,156 @@
@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<div id="mega-menu-4" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
<div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Amdal", "Layanan")" 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 id="mega-menu-4" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<!-- First row - 4 items -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="@Url.Action("Amdal", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="leaf"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">AMDAL</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Analisis Dampak Lingkungan</p>
</a>
<a href="https://ewaste.dinaslhdki.id/" target="_blank" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="smartphone"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Penjemputan e-Waste</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Layanan pengumpulan sampah elektronik</p>
</a>
<a href="@Url.Action("Lab", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="flask-conical"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Uji Sampel Laboratorium</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengujian kualitas lingkungan hidup</p>
</a>
<a href="@Url.Action("BusToilet", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="bus"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Bus Toilet</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Fasilitas toilet keliling untuk kegiatan umum</p>
</a>
</div>
<!-- Second row - 4 items -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
<a href="https://bpsrw.dinaslhdki.id/" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="database"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">BPS-RW</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Basis data lingkungan hidup tingkat Rukun Warga</p>
</a>
<a href="@Url.Action("BulkyWaste", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Bulky Waste</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Layanan khusus pengangkutan sampah besar</p>
</a>
<a href="@Url.Action("Ppid", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">PPID</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pejabat Pengelola Informasi dan Dokumentasi</p>
</a>
<a href="@Url.Action("Whistleblowing", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="alert-triangle"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Whistleblowing System</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Sarana pelaporan pelanggaran terkait lingkungan</p>
</a>
</div>
</div>
</div>
<script>
// Define mobile template for Layanan section
window.layananMobileContent = `
<div class="space-y-3 max-h-[60vh] overflow-y-auto pb-4" style="scrollbar-width: thin; scrollbar-color: #f97316 #f3f4f6;">
<a href="@Url.Action("Amdal", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="leaf"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">AMDAL</div>
<p class="text-sm text-gray-500">Analisis Dampak Lingkungan.</p>
<span class="font-medium text-gray-900">AMDAL</span>
<p class="text-sm text-gray-600">Analisis Dampak Lingkungan</p>
</div>
</a>
<a href="https://ewaste.dinaslhdki.id/" target="_blank" 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="smartphone"></i></div>
<a href="https://ewaste.dinaslhdki.id/" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="smartphone"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Penjemputan e-Waste</div>
<p class="text-sm text-gray-500">Layanan pengumpulan sampah elektronik.</p>
<span class="font-medium text-gray-900">Penjemputan e-Waste</span>
<p class="text-sm text-gray-600">Layanan pengumpulan sampah elektronik</p>
</div>
</a>
<a href="@Url.Action("Lab", "Layanan")" 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="flask-conical"></i></div>
<a href="@Url.Action("Lab", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="flask-conical"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Uji Sampel Laboratorium</div>
<p class="text-sm text-gray-500">Pengujian kualitas lingkungan hidup.</p>
<span class="font-medium text-gray-900">Uji Sampel Laboratorium</span>
<p class="text-sm text-gray-600">Pengujian kualitas lingkungan hidup</p>
</div>
</a>
<a href="@Url.Action("BusToilet", "Layanan")" 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="bus"></i></div>
<a href="@Url.Action("BusToilet", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="bus"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Bus Toilet</div>
<p class="text-sm text-gray-500">Fasilitas toilet keliling untuk kegiatan umum.</p>
<span class="font-medium text-gray-900">Bus Toilet</span>
<p class="text-sm text-gray-600">Fasilitas toilet keliling untuk kegiatan umum</p>
</div>
</a>
<a href="https://bpsrw.dinaslhdki.id/" 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="database"></i></div>
<a href="https://bpsrw.dinaslhdki.id/" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="database"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">BPS-RW</div>
<p class="text-sm text-gray-500">Basis data lingkungan hidup tingkat Rukun Warga.</p>
<span class="font-medium text-gray-900">BPS-RW</span>
<p class="text-sm text-gray-600">Basis data lingkungan hidup tingkat Rukun Warga</p>
</div>
</a>
<a href="@Url.Action("BulkyWaste", "Layanan")" 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="trash-2"></i></div>
<a href="@Url.Action("BulkyWaste", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Bulky Waste</div>
<p class="text-sm text-gray-500">Layanan khusus pengangkutan sampah besar.</p>
<span class="font-medium text-gray-900">Bulky Waste</span>
<p class="text-sm text-gray-600">Layanan khusus pengangkutan sampah besar</p>
</div>
</a>
<a href="@Url.Action("Ppid", "Layanan")" 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="file-text"></i></div>
<a href="@Url.Action("Ppid", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">PPID</div>
<p class="text-sm text-gray-500">Pejabat Pengelola Informasi dan Dokumentasi.</p>
<span class="font-medium text-gray-900">PPID</span>
<p class="text-sm text-gray-600">Pejabat Pengelola Informasi dan Dokumentasi</p>
</div>
</a>
<a href="@Url.Action("Whistleblowing", "Layanan")" 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="alert-triangle"></i></div>
<a href="@Url.Action("Whistleblowing", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="alert-triangle"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Whistleblowing System</div>
<p class="text-sm text-gray-500">Sarana pelaporan pelanggaran terkait lingkungan.</p>
<span class="font-medium text-gray-900">Whistleblowing System</span>
<p class="text-sm text-gray-600">Sarana pelaporan pelanggaran terkait lingkungan</p>
</div>
</a>
</div>
</div>
`;
</script>

66
Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml
View File

@ -1,28 +1,52 @@
@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<div id="mega-menu-5" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
<div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Berita", "Seputar")" 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="newspaper"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Berita</div>
<p class="text-sm text-gray-500">Kegiatan dan informasi terkini dari DLH.</p>
</div>
<div id="mega-menu-5" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Berita", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="newspaper"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Berita</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kegiatan dan informasi terkini dari DLH</p>
</a>
<a href="@Url.Action("Video", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="video"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Video</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kegiatan dan Video terkini dari DLH</p>
</a>
<a href="@Url.Action("Kontak", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="phone"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Kontak Kami</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi kontak untuk keperluan masyarakat</p>
</a>
</div>
</div>
</div>
<script>
// Define mobile template for Seputar DLH section
window.seputarMobileContent = `
<div class="space-y-2 p-4 border-t border-orange-100">
<a href="@Url.Action("Berita", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="newspaper"></i>
<span class="font-medium text-gray-900">Berita</span>
</a>
<a href="@Url.Action("Video", "Seputar")" 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="video"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Video</div>
<p class="text-sm text-gray-500">Kegiatan dan Video terkini dari DLH.</p>
</div>
<a href="@Url.Action("Video", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="video"></i>
<span class="font-medium text-gray-900">Video</span>
</a>
<a href="@Url.Action("Kontak", "Seputar")" 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="phone"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Kontak Kami</div>
<p class="text-sm text-gray-500">Informasi kontak untuk keperluan masyarakat.</p>
</div>
<a href="@Url.Action("Kontak", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="phone"></i>
<span class="font-medium text-gray-900">Kontak Kami</span>
</a>
</div>
</div>
`;
</script>

137
Views/Shared/Partials/_Footer.cshtml
View File

@ -1,6 +1,6 @@
<footer class="bg-oren pt-8">
<footer class="bg-oren md:pt-8">
<!-- Main Footer Section -->
<div class="relative max-w-6xl bg-ijo rounded-2xl mx-auto overflow-hidden shadow-2xl">
<div class="relative max-w-6xl bg-ijo md:rounded-2xl mx-auto overflow-hidden shadow-2xl">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-20">
<div class="absolute inset-0"
@ -13,11 +13,11 @@
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-12 -translate-x-12"></div>
<div class="relative container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-0 md:gap-12">
<!-- Left Section -->
<div class="flex flex-col text-center justify-center lg:text-left">
<div class="flex flex-col text-center justify-center md:text-left">
<div class="inline-block">
<h2 class="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight">SAVE OUR</h2>
<h2 class="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight mt-6">SAVE OUR</h2>
<a href="#" class="flip-animate inline-block">
<span class="text-4xl lg:text-5xl font-black text-yellow-300 mb-4 tracking-tight" data-hover="FUTURE">EARTH</span>
</a>
@ -72,7 +72,7 @@
</div>
<div class="text-left">
<p class="text-white font-medium text-sm lg:text-base">Email</p>
<p class="text-green-100 text-xs lg:text-sm">dinaslh@jakarta.go.id</p>
<p class="text-green-100 texBt-xs lg:text-sm">dinaslh@jakarta.go.id</p>
</div>
</div>
</div>
@ -85,7 +85,7 @@
<!-- Section 2: Tentang Kami dan Layanan -->
<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">
<div class="flex flex-col lg:flex-row justify-between items-center text-white space-y-8 lg:space-y-0">
<!-- Tentang Kami -->
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
<div>
@ -93,24 +93,24 @@
</div>
<div class="flex flex-col space-y-2">
@* <a href="#" class="hover:underline">Visi Misi</a> *@
<a href="#" class="hover:underline">Struktur Organisasi</a>
<a href="@Url.Action("Organisasi", "Profil")" class="hover:underline">Struktur Organisasi</a>
</div>
</div>
<!-- Layanan -->
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-center">
<div>
<h4 class="font-semibold text-xl md:text-2xl">Layanan</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
<a href="#" class="hover:underline">Penjemputan e-Waste</a>
<a href="#" class="hover:underline">Bulky Waste</a>
<a href="#" class="hover:underline">Uji Sampel Laboratorium</a>
<a href="#" class="hover:underline">Permohonan Informasi Publik</a>
<a href="#" class="hover:underline">Bus Toilet</a>
<a href="#" class="hover:underline">BPS-RW</a>
<a href="#" class="hover:underline">AMDAL</a>
<a href="#" class="hover:underline">Whistleblowing System</a>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 items-center text-center md:text-left md:items-start">
<a href="https://ewaste.dinaslhdki.id/" target="_blank" class="hover:underline">Penjemputan e-Waste</a>
<a href="@Url.Action("BulkyWaste", "Layanan")" target="_blank" class="hover:underline">Bulky Waste</a>
<a href="@Url.Action("Lab", "Layanan")" target="_blank" class="hover:underline">Uji Sampel Laboratorium</a>
<a href="@Url.Action("Ppid", "Layanan")" target="_blank" class="hover:underline">Permohonan Informasi Publik</a>
<a href="@Url.Action("BusToilet", "Layanan")" target="_blank" class="hover:underline">Bus Toilet</a>
<a href="https://bpsrw.dinaslhdki.id/" target="_blank" class="hover:underline">BPS-RW</a>
<a href="@Url.Action("Amdal", "Layanan")" target="_blank" class="hover:underline">AMDAL</a>
<a href="@Url.Action("Whistleblowing", "Layanan")" target="_blank" class="hover:underline">Whistleblowing System</a>
</div>
</div>
</div>
@ -119,10 +119,10 @@
<!-- Bottom Section -->
<div class="bg-black py-6">
<div class="container max-w-6xl mx-auto px-4">
<div class="container max-w-6xl mx-auto px-4 md:pb-0 pb-12">
<div class="flex flex-col md:flex-row justify-between items-center text-white space-y-4 md:space-y-0">
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
<img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" class="h-8 md:h-10" alt="DLH Logo" />
<img src="@Url.Content("~/logo-dlh.png")" class="h-8 md:h-10" alt="DLH Logo" />
<div class="text-center md:text-left">
<span class="text-sm md:text-lg font-bold text-white leading-tight">DINAS LINGKUNGAN HIDUP</span>
<span class="block text-xs md:text-sm text-white/70 font-medium">PROVINSI DKI JAKARTA</span>
@ -135,11 +135,11 @@
</div>
</div>
<!-- Chat Button -->
<div id="chatButton" class="fixed bottom-5 right-5 p-4 rounded-full cursor-pointer z-50">
<img src="@Url.Content("~/chatbot.gif")" alt="Chat Icon" class="w-12 h-12 rounded-full"/>
<div class="absolute -top-8 -left-3 bg-green-500 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
Tanya saya!
</div>
<div id="chatButton" class="fixed bottom-22 right-3 md:bottom-5 md:right-5 p-4 cursor-pointer z-20">
<img src="@Url.Content("~/chatbot.svg")" alt="Chat Icon" class="w-24 h-24"/>
@* <div class="absolute -top-8 -left-5 bg-green-500 text-white md:text-xs text-sm px-2 py-1 rounded whitespace-nowrap">
Tanya EcoBot!
</div> *@
</div>
<!-- Chatbot -->
@ -369,6 +369,79 @@ document.addEventListener('DOMContentLoaded', function() {
const closeChat = document.getElementById("closeChat");
const sendMessage = document.getElementById("sendMessage");
const userInput = document.getElementById("userInput");
// Session configuration
const SESSION_DURATION = 30 * 60 * 1000; // 30 menit dalam milliseconds
const STORAGE_KEY = 'ecobot_chat_session';
// Load chat history from localStorage
function loadChatHistory() {
try {
const sessionData = localStorage.getItem(STORAGE_KEY);
if (sessionData) {
const data = JSON.parse(sessionData);
const now = new Date().getTime();
// Check if session is still valid
if (now - data.timestamp < SESSION_DURATION) {
const chatContent = document.querySelector(".chat-content");
// Clear default welcome message
chatContent.innerHTML = '';
// Load saved messages
data.messages.forEach(msg => {
const bubble = document.createElement("div");
bubble.className = `chat-bubble ${msg.type}`;
bubble.style.cssFloat = msg.type === 'user' ? 'right' : 'left';
bubble.style.clear = 'both';
bubble.innerHTML = msg.content;
chatContent.appendChild(bubble);
});
chatContent.scrollTop = chatContent.scrollHeight;
return true; // Session restored
} else {
// Session expired, clear storage
localStorage.removeItem(STORAGE_KEY);
}
}
} catch (error) {
console.error('Error loading chat history:', error);
localStorage.removeItem(STORAGE_KEY);
}
return false; // New session
}
// Save message to localStorage
function saveMessage(type, content) {
try {
let sessionData = localStorage.getItem(STORAGE_KEY);
let data;
if (sessionData) {
data = JSON.parse(sessionData);
} else {
data = {
timestamp: new Date().getTime(),
messages: []
};
}
data.messages.push({ type, content });
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
} catch (error) {
console.error('Error saving message:', error);
}
}
// Initialize chat session
const sessionRestored = loadChatHistory();
if (!sessionRestored) {
// New session - show welcome message and save it
const welcomeMsg = `
<p>Halo! Selamat datang di layanan informasi Dinas Lingkungan Hidup DKI Jakarta! 👋</p>
<p>Saya di sini untuk membantu Anda. Ada yang ingin ditanyakan seputar layanan kami?</p>
`;
saveMessage('bot', welcomeMsg);
}
chatButton.addEventListener("click", () => {
chatbot.classList.remove('scale-0');
@ -399,6 +472,9 @@ document.addEventListener('DOMContentLoaded', function() {
chatContent.appendChild(userBubble);
chatContent.scrollTop = chatContent.scrollHeight;
// Save user message
saveMessage('user', message);
userInput.value = '';
// Show typing indicator
@ -408,7 +484,6 @@ document.addEventListener('DOMContentLoaded', function() {
<span></span>
<span></span>
<span></span>
@* <span class="typing-text">EcoBot sedang mengetik...</span> *@
`;
chatContent.appendChild(typingIndicator);
chatContent.scrollTop = chatContent.scrollHeight;
@ -446,7 +521,6 @@ document.addEventListener('DOMContentLoaded', function() {
if (!reply) reply = "Maaf, saya tidak mengerti.";
// Format reply: convert **text** to bold and handle line breaks
reply = reply.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, "<br>");
reply = reply.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>').replace(/\n/g, "<br>");
// Bot bubble (kiri)
@ -457,18 +531,25 @@ document.addEventListener('DOMContentLoaded', function() {
botBubble.innerHTML = reply;
chatContent.appendChild(botBubble);
chatContent.scrollTop = chatContent.scrollHeight;
// Save bot message
saveMessage('bot', reply);
})
.catch(error => {
// Remove typing indicator
typingIndicator.remove();
const errorMsg = "Maaf, terjadi kesalahan koneksi.";
const botBubble = document.createElement("div");
botBubble.className = "chat-bubble bot";
botBubble.style.cssFloat = "left";
botBubble.style.clear = "both";
botBubble.textContent = "Maaf, terjadi kesalahan koneksi.";
botBubble.textContent = errorMsg;
chatContent.appendChild(botBubble);
chatContent.scrollTop = chatContent.scrollHeight;
// Save error message
saveMessage('bot', errorMsg);
console.error('Error:', error);
});
}

193
Views/Shared/Partials/_MegaMenu.cshtml
View File

@ -2,72 +2,75 @@
@addTagHelper *, InfiniLore.Lucide
<!-- Mega Menu 1: Program -->
<div id="mega-menu-1" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
<div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-3">
<a href="@Url.Action("Udara", "Program")" 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">Udara</div>
<p class="text-sm text-gray-500">Pengelolaan dan pengawasan kualitas udara.</p>
<div id="mega-menu-1" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<!-- First row - 4 items -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="@Url.Action("Udara", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="wind"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Udara</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengelolaan dan pengawasan kualitas udara</p>
</a>
<a href="@Url.Action("Sampah", "Program")" 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="trash"></i>
</div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Sampah</div>
<p class="text-sm text-gray-500">Pengawasan kepatuhan lingkungan.</p>
<a href="@Url.Action("Air", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="droplets"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Air</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengelolaan dan pelestarian air</p>
</a>
<a href="@Url.Action("Anggaran", "Program")" 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="banknote"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Anggaran</div>
<p class="text-sm text-gray-500">Informasi mengenai anggaran DLH.</p>
<a href="@Url.Action("Sampah", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Sampah</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengawasan kepatuhan lingkungan</p>
</a>
<a href="@Url.Action("LKIP", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">LKIP</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Laporan Kinerja Instansi Pemerintah</p>
</a>
</div>
<!-- Second row - 4 items -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
<a href="@Url.Action("Pengawasan", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="eye"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Pengawasan</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Komitmen pencapaian kinerja lingkungan</p>
</a>
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="handshake"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Perjanjian Kinerja</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Upaya pengelolaan sampah terintegrasi</p>
</a>
<div class="space-y-3">
<a href="@Url.Action("Air", "Program")" 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="droplet"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Air</div>
<p class="text-sm text-gray-500">Pengelolaan dan pelestarian air.</p>
<a href="@Url.Action("RencanaStrategis", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="target"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Rencana Strategis</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Dokumen perencanaan strategis DLH</p>
</a>
<a href="@Url.Action("LKIP", "Program")" 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="notebook-text"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">LKIP</div>
<p class="text-sm text-gray-500">Laporan Kinerja Instansi Pemerintah.</p>
</div>
</a>
<a href="@Url.Action("Pengawasan", "Program")" 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="eye"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Pengawasan</div>
<p class="text-sm text-gray-500">Komitmen pencapaian kinerja lingkungan.</p>
</div>
</a>
</div>
<div class="space-y-3">
<a href="@Url.Action("PerjanjianKinerja", "Program")" 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="file-text"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Perjanjian Kinerja</div>
<p class="text-sm text-gray-500">Upaya pengelolaan sampah terintegrasi.</p>
</div>
</a>
<a href="@Url.Action("RencanaStrategis", "Program")" 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="target"></i></div>
<div>
<div class="font-medium text-gray-900 hover:text-orange-700">Rencana Strategis</div>
<p class="text-sm text-gray-500">Dokumen perencanaan strategis DLH.</p>
<a href="@Url.Action("Anggaran", "Program")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="banknote"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Anggaran</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi mengenai anggaran DLH</p>
</a>
</div>
</div>
@ -77,3 +80,83 @@
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu3-PublikasiData.cshtml" />
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu4-Layanan.cshtml" />
<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml" />
<script>
// Define mobile template for Program menu
window.programMobileContent = `
<div class="space-y-3 max-h-[60vh] overflow-y-auto pb-4" style="scrollbar-width: thin; scrollbar-color: #f97316 #f3f4f6;">
<a href="@Url.Action("Udara", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="wind"></i>
</div>
<div>
<span class="font-medium text-gray-900">Udara</span>
<p class="text-sm text-gray-600">Pengelolaan dan pengawasan kualitas udara</p>
</div>
</a>
<a href="@Url.Action("Air", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="droplets"></i>
</div>
<div>
<span class="font-medium text-gray-900">Air</span>
<p class="text-sm text-gray-600">Pengelolaan dan pelestarian air</p>
</div>
</a>
<a href="@Url.Action("Sampah", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
</div>
<div>
<span class="font-medium text-gray-900">Sampah</span>
<p class="text-sm text-gray-600">Pengawasan kepatuhan lingkungan</p>
</div>
</a>
<a href="@Url.Action("LKIP", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="file-text"></i>
</div>
<div>
<span class="font-medium text-gray-900">LKIP</span>
<p class="text-sm text-gray-600">Laporan Kinerja Instansi Pemerintah</p>
</div>
</a>
<a href="@Url.Action("Pengawasan", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="eye"></i>
</div>
<div>
<span class="font-medium text-gray-900">Pengawasan</span>
<p class="text-sm text-gray-600">Komitmen pencapaian kinerja lingkungan</p>
</div>
</a>
<a href="@Url.Action("PerjanjianKinerja", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="handshake"></i>
</div>
<div>
<span class="font-medium text-gray-900">Perjanjian Kinerja</span>
<p class="text-sm text-gray-600">Upaya pengelolaan sampah terintegrasi</p>
</div>
</a>
<a href="@Url.Action("RencanaStrategis", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="target"></i>
</div>
<div>
<span class="font-medium text-gray-900">Rencana Strategis</span>
<p class="text-sm text-gray-600">Dokumen perencanaan strategis DLH</p>
</div>
</a>
<a href="@Url.Action("Anggaran", "Program")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="banknote"></i>
</div>
<div>
<span class="font-medium text-gray-900">Anggaran</span>
<p class="text-sm text-gray-600">Informasi mengenai anggaran DLH</p>
</div>
</a>
</div>
`;
</script>

504
Views/Shared/Partials/_Navbar.cshtml
View File

@ -1,205 +1,355 @@
@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<nav class="bg-white shadow-sm relative z-50">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-6xl px-4 py-3 lg:py-4">
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
<img src="@Url.Content("~/logo-dlh.png")" class="h-10" alt="DLH Logo" />
<div>
<span class="text-lg font-bold text-gray-900 leading-tight">DINAS LINGKUNGAN HIDUP</span>
<span class="block text-sm text-orange-600 font-medium">PROVINSI DKI JAKARTA</span>
</div>
</a>
<!-- 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 transition-colors duration-200"
aria-controls="mobile-drawer" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i id="menu-icon" class="w-6 h-6 transition-transform duration-300" data-lucide="menu"></i>
</button>
<!-- Desktop Menu -->
<div class="hidden md:flex md:items-center md:w-auto">
<ul class="flex flex-col md:flex-row md:space-x-6 font-medium">
<li class="relative group">
<a href="@Url.Action("Index", "Home")" class="flex items-center py-2 text-gray-900 hover:text-orange-600">
Beranda
<!-- Desktop Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4">
<!-- Top Header with Logo -->
<div class="flex items-center justify-between py-4">
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
<img src="@Url.Content("~/logo-dlh.png")" class="h-10" alt="DLH Logo" />
<div>
<span class="text-lg font-bold text-gray-900 leading-tight">DINAS LINGKUNGAN HIDUP</span>
<span class="block text-sm text-orange-600 font-medium">PROVINSI DKI JAKARTA</span>
</div>
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex md:items-center md:space-x-8">
<a href="@Url.Action("Index", "Home")"
class="text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Beranda
</a>
</li>
@* Dropdown Menu Buttons *@
@{
var menus = new[] { "Program", "Profil", "Publikasi Data", "Layanan", "Seputar DLH" };
}
@for (int i = 0; i < menus.Length; i++)
{
<li class="relative group">
<button id="dropdown-button-@(i + 1)"
class="flex items-center justify-between py-2 text-gray-900 hover:text-orange-600 group">
<span>@menus[i]</span>
<i class="w-5 h-5 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</li>
}
</ul>
</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 class="relative group">
<button id="dropdown-button-1"
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Program
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</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 class="relative group">
<button id="dropdown-button-2"
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Profil
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</div>
</div>
<!-- Footer -->
<div class="p-4 border-t border-gray-200">
<div class="text-center text-sm text-gray-500">
<p>&copy; @DateTime.Now.Year DLH DKI Jakarta</p>
<div class="relative group">
<button id="dropdown-button-3"
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Publikasi Data
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</div>
<div class="relative group">
<button id="dropdown-button-4"
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Layanan
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</div>
<div class="relative group">
<button id="dropdown-button-5"
class="flex items-center text-gray-700 hover:text-orange-600 font-medium transition-colors duration-200">
Seputar DLH
<i class="w-4 h-4 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
</button>
</div>
</div>
</div>
</div>
<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
</nav>
<!-- Mobile Bottom Navigation -->
<div class="md:hidden fixed bottom-0 left-0 right-0 z-50">
<!-- Bottom Navigation Bar -->
<div class="bg-white/95 backdrop-blur-xl border-t border-gray-200 shadow-2xl">
<div class="flex items-center justify-around py-2">
<a href="@Url.Action("Index", "Home")"
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
<i class="w-5 h-5" data-lucide="home"></i>
</div>
<span class="text-xs font-medium text-gray-600 mt-1">Beranda</span>
</a>
<button id="mobile-program-btn"
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
<i class="w-5 h-5" data-lucide="briefcase"></i>
</div>
<span class="text-xs font-medium text-gray-600 mt-1">Program</span>
</button>
<button id="mobile-profil-btn"
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
<i class="w-5 h-5" data-lucide="building-2"></i>
</div>
<span class="text-xs font-medium text-gray-600 mt-1">Profil</span>
</button>
<button id="mobile-layanan-btn"
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
<i class="w-5 h-5" data-lucide="headphones"></i>
</div>
<span class="text-xs font-medium text-gray-600 mt-1">Layanan</span>
</button>
<button id="mobile-menu-btn"
class="mobile-nav-item flex flex-col items-center py-2 px-3 rounded-xl transition-all duration-300 active:scale-95">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 text-white shadow-lg">
<i class="w-5 h-5" data-lucide="menu"></i>
</div>
<span class="text-xs font-medium text-gray-600 mt-1">Lainnya</span>
</button>
</div>
</div>
</div>
<!-- Mobile Modal Overlay -->
<div id="mobile-modal-overlay" class="md:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden transition-all duration-300 opacity-0"></div>
<!-- Mobile Menu Modal -->
<div id="mobile-menu-modal" class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl rounded-t-3xl shadow-2xl transform translate-y-full transition-all duration-300 ease-out z-50 max-h-[80vh] overflow-hidden">
<div class="flex flex-col h-full">
<!-- Modal Header -->
<div class="flex items-center justify-between p-6 border-b border-gray-200/50">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg">
<i class="w-6 h-6 text-white" data-lucide="menu"></i>
</div>
<div>
<h3 class="text-lg font-bold text-gray-900">Menu</h3>
<p class="text-sm text-orange-600">Pilih menu navigasi</p>
</div>
</div>
<button id="mobile-modal-close" class="p-2 rounded-xl hover:bg-gray-100 transition-all duration-200 active:scale-95">
<i class="w-6 h-6 text-gray-600" data-lucide="x"></i>
</button>
</div>
<!-- Modal Content -->
<div id="mobile-modal-content" class="flex-1 overflow-y-auto p-6">
<!-- Content will be dynamically loaded here -->
</div>
</div>
</div>
<partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
<style>
.mobile-nav-item:active {
transform: scale(0.95);
}
.mobile-nav-item:hover .w-8 {
transform: scale(1.1);
}
/* Safe area for devices with home indicator */
@@supports (padding-bottom: env(safe-area-inset-bottom)) {
.md\\:hidden.fixed.bottom-0 {
padding-bottom: env(safe-area-inset-bottom);
}
}
</style>
<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');
// Mobile modal elements
const mobileModalOverlay = document.getElementById('mobile-modal-overlay');
const mobileMenuModal = document.getElementById('mobile-menu-modal');
const mobileModalClose = document.getElementById('mobile-modal-close');
const mobileModalContent = document.getElementById('mobile-modal-content');
function openDrawer() {
mobileDrawer.classList.remove('translate-x-full');
mobileOverlay.classList.remove('hidden');
// Mobile navigation buttons
const mobileProgramBtn = document.getElementById('mobile-program-btn');
const mobileProfilBtn = document.getElementById('mobile-profil-btn');
const mobileLayananBtn = document.getElementById('mobile-layanan-btn');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
function showMobileModal(content, title) {
mobileModalContent.innerHTML = content;
mobileMenuModal.querySelector('h3').textContent = title;
mobileModalOverlay.classList.remove('hidden');
setTimeout(() => {
mobileModalOverlay.classList.remove('opacity-0');
mobileMenuModal.classList.remove('translate-y-full');
}, 10);
document.body.style.overflow = 'hidden';
menuIcon.setAttribute('data-lucide', 'x');
lucide.createIcons();
}
function closeDrawer() {
mobileDrawer.classList.add('translate-x-full');
mobileOverlay.classList.add('hidden');
function hideMobileModal() {
mobileModalOverlay.classList.add('opacity-0');
mobileMenuModal.classList.add('translate-y-full');
setTimeout(() => {
mobileModalOverlay.classList.add('hidden');
}, 300);
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();
}
// Event listeners for mobile buttons
mobileProgramBtn.addEventListener('click', () => {
showMobileModal(window.programMobileContent || "", 'Program');
lucide.createIcons();
});
mobileClose.addEventListener('click', closeDrawer);
mobileOverlay.addEventListener('click', closeDrawer);
mobileProfilBtn.addEventListener('click', () => {
showMobileModal(window.profilMobileContent || "", 'Profil');
lucide.createIcons();
});
// 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 {
mobileLayananBtn.addEventListener('click', () => {
showMobileModal(window.layananMobileContent || "", 'Layanan');
lucide.createIcons();
});
mobileMenuBtn.addEventListener('click', () => {
// Get publikasi data and seputar content from their respective mega menu files
const publikasiDataContent = window.publikasiDataMobileContent || "";
const seputarContent = window.seputarMobileContent || "";
const allMenuContent = `
<div class="space-y-4">
<!-- Publikasi Data Section -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('publikasi-submenu')">
<div class="flex items-center gap-3">
<i class="w-6 h-6 text-orange-600" data-lucide="database"></i>
<div class="text-left">
<span class="font-medium text-gray-900">Publikasi Data</span>
<p class="text-sm text-orange-600">Data dan informasi lingkungan hidup</p>
</div>
</div>
<i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="publikasi-chevron"></i>
</button>
<div id="publikasi-submenu" class="hidden bg-white overflow-y-auto max-h-64">
${publikasiDataContent}
</div>
</div>
<!-- Seputar DLH Section -->
<div class="border border-gray-200 rounded-xl overflow-hidden">
<button class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 transition-all duration-300" onclick="toggleSubmenu('seputar-submenu')">
<div class="flex items-center gap-3">
<i class="w-6 h-6 text-orange-600" data-lucide="info"></i>
<div class="text-left">
<span class="font-medium text-gray-900">Seputar DLH</span>
<p class="text-sm text-orange-600">Informasi dan kegiatan DLH</p>
</div>
</div>
<i class="w-5 h-5 text-orange-600 transition-transform duration-300" data-lucide="chevron-down" id="seputar-chevron"></i>
</button>
<div id="seputar-submenu" class="hidden bg-white">
${seputarContent}
</div>
</div>
</div>
`;
showMobileModal(allMenuContent, 'Menu Lainnya');
lucide.createIcons();
});
// Add global function for toggling submenus
window.toggleSubmenu = function(submenuId) {
const submenu = document.getElementById(submenuId);
const chevron = document.getElementById(submenuId.replace('-submenu', '-chevron'));
if (submenu.classList.contains('hidden')) {
submenu.classList.remove('hidden');
submenu.style.maxHeight = submenu.scrollHeight + 'px';
chevron.style.transform = 'rotate(180deg)';
} else {
submenu.style.maxHeight = '0px';
chevron.style.transform = 'rotate(0deg)';
setTimeout(() => {
submenu.classList.add('hidden');
chevron.style.transform = 'rotate(0deg)';
}
});
}, 300);
}
};
// Close modal events
mobileModalClose.addEventListener('click', hideMobileModal);
mobileModalOverlay.addEventListener('click', hideMobileModal);
// Desktop dropdown functionality
const dropdownButtons = document.querySelectorAll('[id^="dropdown-button-"]');
const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');
dropdownButtons.forEach((button, index) => {
const megaMenu = document.getElementById(`mega-menu-${index + 1}`);
if (megaMenu) {
button.addEventListener('mouseenter', () => {
megaMenus.forEach(menu => menu.classList.add('hidden'));
megaMenu.classList.remove('hidden');
});
button.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!megaMenu.matches(':hover') && !button.matches(':hover')) {
megaMenu.classList.add('hidden');
}
}, 100);
});
megaMenu.addEventListener('mouseleave', () => {
megaMenu.classList.add('hidden');
});
}
});
});
</script>
<script>
mobileDataBtn.addEventListener('click', () => {
window.location.href = '/Publikasi/DIKPLHD';
});
mobileMenuBtn.addEventListener('click', () => {
showMobileModal(allMenuContent, 'Menu Lainnya');
lucide.createIcons();
});
// Close modal events
mobileModalClose.addEventListener('click', hideMobileModal);
mobileModalOverlay.addEventListener('click', hideMobileModal);
// Desktop dropdown functionality
const dropdownButtons = document.querySelectorAll('[id^="dropdown-button-"]');
const megaMenus = document.querySelectorAll('[id^="mega-menu-"]');
dropdownButtons.forEach((button, index) => {
const megaMenu = document.getElementById(`mega-menu-${index + 1}`);
if (megaMenu) {
button.addEventListener('mouseenter', () => {
megaMenus.forEach(menu => menu.classList.add('hidden'));
megaMenu.classList.remove('hidden');
});
button.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!megaMenu.matches(':hover') && !button.matches(':hover')) {
megaMenu.classList.add('hidden');
}
}, 100);
});
megaMenu.addEventListener('mouseleave', () => {
megaMenu.classList.add('hidden');
});
}
});
});
</script>

32
Views/Shared/Partials/_Scripts.cshtml
View File

@ -10,35 +10,3 @@
lucide.createIcons();
});
</script>
<script type="module">
@* import { createChat } from 'https://cdn.jsdelivr.net/npm/@@n8n/chat/dist/chat.bundle.es.js'; *@
createChat({
webhookUrl: 'https://n8n.nurarif.in/webhook/f2129606-7716-415b-a83b-b9c0e84b752f/chat',
webhookConfig: {
method: 'POST',
headers: {}
},
target: '#n8n-chat',
mode: 'window',
chatInputKey: 'chatInput',
chatSessionKey: 'sessionId',
metadata: {},
showWelcomeScreen: false,
defaultLanguage: 'en',
initialMessages: [
'Hi there! 👋',
'My name is Nathan. How can I assist you today?'
],
i18n: {
en: {
title: 'Hi there! 👋',
subtitle: "Start a chat. We're here to help you 24/7.",
footer: '',
getStarted: 'New Conversation',
inputPlaceholder: 'Type your question..',
},
},
});
</script>

9
Views/Shared/_Layout.cshtml
View File

@ -1,5 +1,4 @@

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="id">
@{
@ -47,9 +46,11 @@
<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/website.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" />
<link rel="stylesheet" href="~/css/scroll-snap.css" />
@* <link rel="stylesheet" href="~/css/style.css" asp-append-version="true" /> *@
@await RenderSectionAsync("css", required: false)
<dynamic-section name="css" />

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

BIN
obj/Debug/net9.0/compressed/1eirg8gji5-b8vwsgm4sc.gz
View File

Binary file not shown.

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

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

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

@ -1 +1 @@
8b309c95af47ccef6d2a4591f3aa7b0fe15558ba0030b407144540a73245cb26
cf611b6f1aa9bd088def72a83e17da3e77d8a4198267ec3251f789ebbe307535

36
obj/Debug/net9.0/dlh-net.GeneratedMSBuildEditorConfig.editorconfig
View File

@ -52,6 +52,10 @@ build_metadata.AdditionalFiles.CssScope =
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9TbGlkZXJjb3AuY3NodG1s
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Components/Home/_Slider_copy.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9TbGlkZXJfY29weS5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Components/Home/_Sosmed.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcQ29tcG9uZW50c1xIb21lXF9Tb3NtZWQuY3NodG1s
build_metadata.AdditionalFiles.CssScope =
@ -96,6 +100,10 @@ build_metadata.AdditionalFiles.CssScope =
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcTGF5YW5hblxQcGlkLmNzaHRtbA==
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Layanan/Whistleblowing.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcTGF5YW5hblxXaGlzdGxlYmxvd2luZy5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Profil/Bidang.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHJvZmlsXEJpZGFuZy5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
@ -144,6 +152,26 @@ build_metadata.AdditionalFiles.CssScope =
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXERpa3BsaGQuY3NodG1s
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/GasRumahKaca.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXEdhc1J1bWFoS2FjYS5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/IKLH.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXElLTEguY3NodG1s
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/Kajian.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXEthamlhbi5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/KeanekaragamanHayati.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXEtlYW5la2FyYWdhbWFuSGF5YXRpLmNzaHRtbA==
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/KLHS.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXEtMSFMuY3NodG1s
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/LaporanKeuangan.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXExhcG9yYW5LZXVhbmdhbi5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
@ -152,6 +180,14 @@ build_metadata.AdditionalFiles.CssScope =
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXExhcG9yYW5LdWFsaXRhc0Fpci5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/LaporanKualitasUdara.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXExhcG9yYW5LdWFsaXRhc1VkYXJhLmNzaHRtbA==
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/MonitoringEmisi.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXE1vbml0b3JpbmdFbWlzaS5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =
[C:/laragon/www/dlh-net/Views/Publikasi/Peraturan.cshtml]
build_metadata.AdditionalFiles.TargetPath = Vmlld3NcUHVibGlrYXNpXFBlcmF0dXJhbi5jc2h0bWw=
build_metadata.AdditionalFiles.CssScope =

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

@ -6416,7 +6416,6 @@ 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\55sm932zpp-on0js6nvpu.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\ug1ceg2arp-islyxa57bt.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\kui6q04f01-27plz38t4k.gz
@ -6441,4 +6440,9 @@ C:\laragon\www\dlh-net\obj\Debug\net9.0\rjimswa.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\rjsmrazor.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\rjsmcshtml.dswa.cache.json
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\s9158qcgwh-r8za1puz0v.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-bsf4q98k6j.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\d5dxynnpxs-x5f0iogtxy.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\wj81mgrgzd-yt11h4ah29.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\1eirg8gji5-6h6v874upz.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\w8avq7peoa-a5oxcjr1hd.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\hc40dw3fux-ajywtditkh.gz
C:\laragon\www\dlh-net\obj\Debug\net9.0\compressed\e2z0l6bcef-ki7a902c04.gz

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

Binary file not shown.

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
Djyed7vo8rvxJS67tD6vxwI6uV46EF2UviSbLnoRQTc=
845ekAviybfgQfQgldHgn2fXbp9G2Bvyr8O8LTKgi9k=

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

File diff suppressed because one or more lines are too long

103
wwwroot/assets/images/home/pancoran-bg.svg 100644
View File

@ -0,0 +1,103 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3842.87 2694.32">
<defs>
<style>
.cls-1 {
fill: #38332d;
}
.cls-2 {
fill: #cbe1e6;
}
.cls-2, .cls-3, .cls-4 {
opacity: .3;
}
.cls-3 {
fill: #c3def0;
}
.cls-5 {
fill: none;
}
.cls-6 {
fill: #edc620;
opacity: .2;
}
.cls-7 {
fill: #bca28d;
}
.cls-4 {
fill: #c1dade;
}
.cls-8 {
fill: #318269;
}
.cls-9 {
fill: #968f88;
}
.cls-10 {
fill: #88817b;
}
.cls-11 {
clip-path: url(#clippath);
}
.cls-12 {
fill: #aa9481;
}
</style>
<clipPath id="clippath">
<rect class="cls-5" width="3842.87" height="2694.32"/>
</clipPath>
</defs>
<g id="Layer_3" data-name="Layer 3">
<g class="cls-11">
<g>
<polygon class="cls-8" points="2510.98 1791.14 2543.33 1794.08 2540.39 1744.08 2496.27 1667.62 2581.56 1714.67 2581.56 1773.49 2608.03 1761.73 2631.56 1761.73 2605.09 1785.26 2593.33 1799.96 2537.45 1811.73 2513.92 1814.67 2510.98 1791.14"/>
<path class="cls-8" d="M3012.91,1883.29s35.29-2.94,44.12,20.59c8.82,23.53,23.53,55.88,23.53,55.88l-8.82-82.35-5.88-23.53-32.35-5.88-11.77-17.65-61.76,8.82,35.29,17.64-17.64,17.65,8.82,11.76,26.47-2.94Z"/>
<path class="cls-8" d="M1720.6,1727.62s31.72-15.76,48.6,2.85c16.88,18.61,42.49,43.25,42.49,43.25l-38.59-73.28-14.15-19.7-32.24,6.47-17.45-12.06-54.15,30.99,54.42-3.12-51.47,35.29,39.01,1.8,23.51-12.5Z"/>
<polygon class="cls-8" points="2228.64 1919.56 2299.23 1969.56 2278.64 1996.03 2331.58 1993.09 2372.75 1984.27 2355.11 1966.62 2402.16 1943.09 2408.04 1910.74 2337.46 1960.74 2313.93 1943.09 2228.64 1919.56"/>
<polygon class="cls-8" points="3218.14 1455.93 3262.05 1503.67 3242.8 1519.85 3282.09 1526 3313.67 1525.99 3303.5 1510.28 3341.7 1500.41 3351.08 1477.61 3291.48 1503.2 3276.99 1486.57 3218.14 1455.93"/>
</g>
<g>
<polygon class="cls-8" points="1019.97 1835.51 1046.52 1837.93 1044.11 1796.89 1007.9 1734.13 1077.9 1772.75 1077.9 1821.03 1099.63 1811.37 1118.94 1811.37 1097.21 1830.68 1087.56 1842.75 1041.69 1852.41 1022.38 1854.82 1019.97 1835.51"/>
<path class="cls-8" d="M1431.94,1911.15s28.97-2.41,36.21,16.9c7.24,19.31,19.31,45.87,19.31,45.87l-7.24-67.59-4.83-19.31-26.55-4.83-9.66-14.48-50.69,7.24,28.97,14.48-14.48,14.48,7.24,9.66,21.72-2.42Z"/>
<path class="cls-8" d="M371.24,1783.38s26.03-12.93,39.89,2.34c13.86,15.28,34.87,35.5,34.87,35.5l-31.67-60.15-11.61-16.17-26.46,5.31-14.32-9.9-44.44,25.44,44.67-2.56-42.24,28.97,32.02,1.47,19.3-10.26Z"/>
<polygon class="cls-8" points="788.23 1940.92 846.17 1981.96 829.27 2003.68 872.72 2001.27 906.51 1994.03 892.03 1979.54 930.65 1960.23 935.48 1933.68 877.55 1974.71 858.24 1960.23 788.23 1940.92"/>
<polygon class="cls-8" points="1600.38 1560.38 1636.43 1599.57 1620.63 1612.85 1652.87 1617.89 1678.79 1617.89 1670.44 1604.99 1701.79 1596.89 1709.5 1578.18 1660.58 1599.18 1648.69 1585.53 1600.38 1560.38"/>
</g>
<circle class="cls-6" cx="1794.11" cy="1098.36" r="751.39"/>
<path class="cls-3" d="M2730.19,777.81l43.59-41.8,113.99-16.26,26.82-23.22s63.7-39.48,107.29-48.77c43.59-9.29,97.23-16.26,97.23-16.26l20.12,32.51s43.59-32.51,60.35-11.61c16.76,20.9-3.35,41.8-3.35,41.8l30.17,9.29s-3.35,9.29,23.47,9.29,90.52-6.97,90.52-6.97c0,0-30.17,39.48-20.12,39.48s-211.22,30.19-211.22,30.19c0,0-50.29-9.29-73.76,0-23.47,9.29-67.06-23.22-77.11-23.22s-53.64-13.93-77.11,0-150.88,25.55-150.88,25.55Z"/>
<path class="cls-3" d="M3434.28,1091.33l46.94-16.26,46.94-2.32,46.94,2.32s36.88,2.32,23.47,13.93c-13.41,11.61-46.94,23.22-83.82,23.22s-93.88-9.29-93.88-9.29l13.41-11.61Z"/>
<path class="cls-3" d="M2146.44,904.39c15.7,4.08,113.99,0,113.99,0,0,0,16.76,25.55,26.82,25.55s53.64,11.61,63.7,13.93c10.06,2.32,3.35,16.26,20.12,16.26s46.94-16.26,36.88-23.22-53.64-44.12-53.64-44.12c0,0,67.06-20.9,73.76,0,6.71,20.9,10.06,34.84,20.12,34.84s83.82-11.61,107.29-11.61h90.52l43.59-44.12,83.82-20.9h57l-77.11,23.22s-33.53,9.29-30.17,23.22c3.35,13.93,134.11-4.64,134.11-4.64l60.35-41.8-20.12,37.16s60.35-4.64,103.94-9.29c43.59-4.64,251.46-4.64,251.46-4.64,0,0-305.1,39.48-315.16,41.8-10.06,2.32-103.94,20.9-120.7,25.55-16.76,4.64-40.23,27.87-50.29,37.16-10.06,9.29-60.35,20.9-70.41,18.58-10.06-2.32-181.05-20.9-234.69-20.9h-177.7s-93.88,0-117.35-2.32c-23.47-2.32-90.52-18.58-90.52-18.58,0,0-10.06-71.99,70.41-51.09Z"/>
<path class="cls-3" d="M311.65,1127.22h306.14c14.81,0,138.26-15.73,138.26-15.73l79-11.79s19.75,3.93,44.44,3.93,103.69-27.52,103.69-27.52c0,0,74.07-11.79,79-23.59,4.94-11.79,39.5-47.18,49.38-58.97,9.88-11.79,29.63-70.77,49.38-55.04,19.75,15.73,44.44,15.73,59.25,39.31,14.81,23.59-4.94,66.83-4.94,66.83l-39.5,43.25,74.07,3.93,49.38-7.86,123.44-23.59,39.5,19.66,59.25,23.59-14.81-51.11s-19.75-23.59,0-31.45c19.75-7.86,98.75-19.66,98.75-19.66,0,0,44.44,3.93,64.19,3.93s59.25-15.73,59.25-15.73l-29.63-31.45s-24.69-70.77,14.81-58.97c39.5,11.79,98.76,3.93,118.51,15.73,19.75,11.79,49.38,39.31,54.32,51.11,4.94,11.79,34.56,0,39.5,19.66s-143.19,31.45-162.95,31.45,79,62.9,79,62.9l-34.56,43.25s-49.38,3.93-14.81,19.66c34.56,15.73,167.88,51.11,167.88,51.11,0,0,44.44,19.66,74.07,19.66,10.86,0,34.33,1.06,59.71,2.4,43.84,2.31,93.36,5.47,93.36,5.47,0,0,108.63-19.66,123.44-19.66s34.56,47.18,34.56,47.18c0,0-64.19,15.73-79,11.79-14.81-3.93-192.57-3.93-192.57-3.93h-69.13l9.88,23.59s-93.82,31.45-128.38,31.45-143.19-11.79-162.95-15.73c-19.75-3.93-98.76,0-133.32,0h-311.08c-19.75,0-123.44-11.79-158.01-19.66-34.56-7.86-64.19-35.38-172.82-47.18-108.63-11.79-276.51-11.79-276.51-11.79,0,0-256.76-23.59-276.51-23.59s-83.94,3.93-83.94-7.86-93.82-47.18-93.82-47.18l93.82-11.79Z"/>
<path class="cls-4" d="M1680.4,680.74s-106.41,26.07-130.97,19.55c-24.56-6.51-319.24-6.51-319.24-6.51h-114.6l16.37,39.1s-155.52,52.14-212.82,52.14-237.38-19.55-270.13-26.07c-32.74-6.52-163.71,0-221.01,0H.4v-362.52l149.29-28.52,65.49,32.59,98.22,39.1-24.55-84.73s-32.75-39.1,0-52.13c32.74-13.04,163.71-32.59,163.71-32.59,0,0,73.67,6.52,106.41,6.52s98.23-26.07,98.23-26.07l-49.12-52.14s-40.92-117.32,24.56-97.76c65.49,19.55,163.71,6.51,196.46,26.07,32.74,19.55,81.85,65.17,90.04,84.72,8.18,19.55,57.3,0,65.48,32.59,8.19,32.59-237.38,52.14-270.12,52.14s130.97,104.28,130.97,104.28l-57.3,71.69s-81.86,6.51-24.56,32.58c57.3,26.07,278.31,84.73,278.31,84.73,0,0,73.67,32.59,122.79,32.59,18,0,56.91,1.75,98.98,3.97,72.67,3.83,154.77,9.06,154.77,9.06,0,0,180.08-32.59,204.64-32.59s57.3,78.21,57.3,78.21Z"/>
<path class="cls-2" d="M3842.47,1080.1v280.77c-32.18-10.77-73.87-21.06-131.54-27.88-151.33-17.9-385.2-17.9-385.2-17.9,0,0-357.7-35.79-385.21-35.79s-116.93,5.97-116.93-11.94-130.7-71.58-130.7-71.58l130.7-17.9h426.47c20.64,0,192.6-23.86,192.6-23.86l110.06-17.9s27.51,5.97,61.91,5.97,144.45-41.76,144.45-41.76c0,0,50.7-8.8,83.39-20.22Z"/>
<path class="cls-7" d="M2118.56,1563.48c-.39.72-.85,1.37-1.31,2.09-9.98,15.85-27.99,31.84-27.99,31.84,0,0-10.9,13.31-40.91,37.91,0,0-.26.26-.85.72-.06.05-.12.1-.19.16-.69.56-1.4,1.13-2.11,1.71-.16.13-.33.26-.5.39-10.54,8.48-23.25,18.25-38.46,29.26-.28.21-.43.32-.43.32-2.55,1.82-5.22,3.72-7.9,5.61-21.2,15.01-65.37,40.06-91.34,58.72-116.41,83.58-261.97,182.11-426.27,311.04-131.14,102.89-278.28,212.44-395.85,326.24-17.23,16.67-35.06,34.08-53.43,52.17-89.35,87.98-191.41,192.04-298.66,305.29-7.07,7.46-14.16,14.97-21.27,22.51-53.38,56.62-107.91,115.38-162.68,175.45-14.88,16.32-29.77,32.73-44.67,49.23-164.1,181.72-324.14,368.82-442.24,509.36v-572.09c303.59-292.09,930.39-860.93,1590.6-1256.19,24.79-14.88,49.65-29.56,74.58-43.85,2.02-1.17,4.04-2.35,6-3.52,4.97-2.98,9.63-5.9,14.09-8.8l.32-.21c5.85-3.81,11.35-7.57,16.71-11.35l.2-.13c18.66-13.11,35.76-26.36,60.22-41.63,18.66-11.68,33.28-19.7,51.35-29.36l242.95,47.1h.04Z"/>
<path class="cls-1" d="M2167.56,1514.74l-39.21,40.91s-27.8,22.12-9.79,7.83c0,0-353.71,25.84-391.88,47.89l-62.05-12.79-280.04-57.74,123.97-156.59,466.13,92.33,192.87,38.17Z"/>
<polygon class="cls-7" points="1495.51 1332.05 2155.6 1439.71 2167.56 1514.74 1508.56 1384.25 1384.58 1540.84 1371.54 1488.64 1495.51 1332.05"/>
<path class="cls-10" d="M2704.74,717.61l-5.42-8.68,1.11-4.37-4.37-14.09s-11.94,3.26-16.31,4.31c-4.37,1.11-2.15-6.52-2.15-6.52,0,0,0-5.42-1.11-8.68-1.11-3.26-11.94,0-11.94,0,0,0-38.1,18.47-47.89,21.73-8.03,2.68-18.27,4.63-23.49,5.87-1.11.26-2.02.46-2.61.65-3.26,1.11-30.41,7.63-30.41,7.63,0,0-27.21,10.9-30.47,13.05s-31.51,9.79-31.51,9.79l-14.16,14.16s-33.73,6.52-40.26,9.79-26.1,16.31-26.1,16.31c0,0-23.88,10.83-40.19,14.09-16.31,3.26-32.62,14.16-32.62,14.16,0,0-25.05,18.47-31.58,22.84s-24.99,3.26-34.78,3.26-24.99,15.2-29.36,18.47c-4.37,3.26-18.47,4.37-18.47,4.37l-30.47-3.26-6.52-21.73-32.62-18.53s-34.78-16.31-78.3-20.62c-30.14-3-39.93,12.72-43.06,22.71-1.44,4.44-1.5,7.7-1.5,7.7l-38.1-2.15-2.15,27.21-.65-.2-37.52-13.18-5.35-1.89s-16.05-4.76-38.43-8.09c-12.79-1.96-27.66-3.46-42.87-3.39-12.14.07-24.53,1.17-36.15,3.91-51.09,11.94-49.98,48.94-49.98,48.94,0,0-.65-.2-1.83-.39h-.07c-3-.65-9.26-1.83-15.53-1.83-8.68,0-26.1-4.31-37-6.52-10.83-2.15-40.19-11.94-47.83-16.31-5.74-3.2-24.14-8.94-39.93-16.12-5.29-2.41-10.31-5.02-14.42-7.76-16.31-10.9-78.3-7.63-78.3-7.63,0,0,15.2,17.42,17.36,20.68,1.04,1.5,6.26,8.42,11.55,15.92,6.13,8.61,12.4,18.07,12.4,21.01,0,5.48-6.52,19.57-6.52,19.57l-21.73,17.42,4.31,23.95,56.57,7.57,144.65,5.48,12.98-30.27c-.26,1.63-2.15,13.7-2.15,24.79,0,12.01,8.74,32.62,8.74,32.62h-31.58l-76.08,12.01-39.15,19.57s-103.35,45.67-106.61,46.72c-3.26,1.11-14.09,0-20.62,0s-12.01,3.26-22.84,6.52c-10.9,3.26-16.31,4.37-25.05,4.37s-16.31,2.15-16.31,2.15c0,0-15.2,2.22-20.62,1.11-5.48-1.11-15.27,2.15-15.27,2.15l-3.26,12.01,8.74,1.04h20.62c7.63,0,7.63,10.9,7.63,10.9l-9.79,5.42h-18.47l-13.05,1.11v11.94h15.2c4.37,0,21.73,1.11,21.73,1.11l-7.57,8.68-17.42,2.22-11.94,5.42,1.04,13.05,8.74,4.37s11.94,0,15.2-1.11,15.2-11.94,15.2-11.94l17.42-1.11,2.15,5.42-9.79,8.74s-18.47,8.68-21.73,9.79c-3.26,1.04-16.31,1.04-16.31,1.04l1.11,14.16,19.57-1.11,53.24-21.73,15.27-5.42,5.42,6.52,4.37,19.57-15.27,9.79,1.37,5.42,1.89,7.63,14.16-2.22,14.16-4.31,6.52-10.9,23.36-70.14,9.79-8.16,32.62-11.42,40.78-9.79,65.25-13.05,107.66-8.16,2.74,1.04,10.31,3.85s-14.68,16.31-21.21,19.57c-2.28,1.11-6.98,3.26-12.59,6.59-10.37,6.07-24.01,16.05-31.45,30.93-11.42,22.84,1.63,40.78,1.63,40.78l-14.68,21.21-19.38.98-13.25.65s-2.28,0-6.39.33c-5.81.46-15.4,1.57-27.08,4.37-12.98,3-28.64,8.09-44.83,16.51-16.31,8.48-25.58,16.96-31.45,24.21-8.81,10.83-9.98,18.86-15.86,19.84-5.74.98-20.55,13.18-31.71,23.1-7.9,6.98-13.96,12.79-13.96,12.79,0,0-19.57,4.89-29.36,8.16-4.57,1.5-22.31,11.22-39.93,21.14-20.1,11.29-40,22.9-40,22.9l-3.98,26.95-4.18,28.51c-7.05,4.89-4.89,23.36-4.89,23.36l65.25-80.45s.65.13,1.89.33c.39.07.78.13,1.31.2l137.09,24.47,8.68-11.94s4.37-14.16,3.26-17.42c-1.04-3.26-39.15-14.09-39.15-14.09l22.84-4.37,169.64-48.94,4.37,14.16s10.9,6.52,15.2,13.05c4.37,6.52,26.1,30.41,26.1,30.41,0,0,47.89,44.63,54.42,50.04,6.52,5.42,8.68,13.05,8.68,13.05l-22.84,15.2,210.95,34.84s-7.57-23.95-9.79-31.58c-2.15-7.57-6.52-14.09-20.62-19.57-14.16-5.42-19.57-35.89-22.84-38.04s-46.78-28.25-58.72-39.15c-12.01-10.9-71.77-70.66-71.77-70.66,0,0-6-3-5.55-11.88,0-.39,0-.78.07-1.17,1.11-9.79,10.9-15.27,14.16-18.53s18.47-23.88,18.47-28.25c0-2.35.91-11.09,1.83-18.53.33-2.41.59-4.7.78-6.59.39-3.2.65-5.35.65-5.35l3.85-1.17,7.05-2.09,17.42-3.26,26.1-7.57h29.36l27.14-21.79,16.31-4.31s51.15-28.32,58.72-37c7.63-8.68,8.74-34.78,9.79-41.3,1.11-6.52,14.16-23.95,14.16-23.95l11.94-13.05s1.11-11.94,14.16-15.2c13.05-3.26,48.94-6.52,53.31-9.79,4.31-3.26,47.83-28.32,47.83-28.32l57.61-31.51s51.15-21.73,56.57-24.99c5.42-3.26,23.95-9.79,34.78-19.57,10.9-9.79,30.47-28.32,39.15-41.37,8.74-13.05,44.63-26.1,52.2-31.51,7.63-5.42,12.01,1.11,15.27,4.37s8.68,7.57,14.09,9.79c5.48,2.15,25.05,13.05,25.05,13.05,0,0,11.94,13.05,23.88,16.31,12.01,3.26,16.31-4.37,16.31-4.37l-8.68-16.31-20.68-8.68-2.15-13.05,6.52-8.74,16.31-2.15s54.35-19.57,58.72-20.68c4.37-1.04,27.21-5.42,27.21-5.42,0,0,5.42-4.37,4.31-10.9l-7.57-11.94h11.94l2.15-7.63ZM1696.66,916.61c-22.84-3.26-61.99-6.52-68.51-3.26-6.52,3.26-31.51,7.63-31.51,7.63l5.42-6.52s10.9-15.2,26.1-16.31c15.27-1.11,13.05-15.2,35.89-6.52,22.84,8.68,33.73,17.42,38.1,18.47,4.31,1.11,17.36,9.79-5.48,6.52ZM1813.07,930.77s1.04-59.83,5.42-71.77c4.37-11.94,18.47-21.73,30.47-29.36,11.94-7.63,33.67,5.42,11.94,15.2-21.73,9.79-47.83,85.93-47.83,85.93ZM1977.23,907.94c-22.84-13.05-42.41-16.31-58.72-13.05-16.31,3.26-29.36,6.52-29.36,6.52,0,0,7.63,15.2,22.84,16.31,15.27,1.11,30.47-1.11,35.89,4.37,5.48,5.42,9.79,10.83,5.48,11.94-4.37,1.11-33.73-3.26-47.89,2.15-14.09,5.48-18.47,9.79-26.1,16.31-7.57,6.52-15.2,14.16-19.57,10.9-4.31-3.26-3.26-40.26-2.15-44.56,1.11-4.37,3.26-6.52,11.94-10.9,8.74-4.37,4.37-22.84,0-24.99-4.31-2.22-17.36-4.37-17.36-4.37,0,0,11.94-39.15,47.83-27.21,35.89,12.01,59.83,18.53,70.66,26.1,10.9,7.63,33.73,26.1,40.26,27.21,6.52,1.11-10.9,16.31-33.73,3.26Z"/>
<path class="cls-9" d="M2593.17,707.17c-2.81,4.96-4.76,8.29-4.76,8.29,0,0-16.31,4.89-21.21,6.52-4.89,1.63-17.94,8.16-22.84,9.79-4.89,1.63-19.57,6.52-19.57,6.52,0,0-26.1,17.94-32.62,21.21-6.52,3.26-21.21,11.42-30.99,17.94-9.79,6.52-26.1,4.89-26.1,4.89l-22.84,14.68s-26.1,1.63-37.52,4.89c-11.42,3.26-22.84,21.21-32.62,29.36-9.79,8.16-17.94,14.68-26.1,21.21-8.16,6.52-29.36,11.42-32.62,16.31s-1.63,48.94-1.63,48.94c0,0-11.42-3.26-24.47-13.05-13.05-9.79-52.2-27.73-61.99-32.62-9.79-4.89-45.67,9.79-45.67,9.79,0,0-13.05,11.42-21.21,21.21-8.16,9.79,3.26,16.31,3.26,22.84s29.36,30.99,34.26,34.25c4.89,3.26-13.05,11.42-17.94,9.79s-40.78-14.68-40.78-14.68l-30.99,1.63s-9.79,29.36-11.42,42.41c-1.63,13.05-17.94,3.26-27.73-1.63-9.79-4.89-24.47,9.79-34.26,26.1-9.79,16.31-13.05,35.89-13.05,35.89,0,0-29.36-16.31-35.89-13.05-6.52,3.26-6.52,35.89-6.52,35.89,0,0,4.89,27.73,8.16,37.52,1.76,5.22-2.61,13.77-7.05,20.55-1.57,2.54-3.2,4.76-4.5,6.52-1.83,2.41-3.13,3.91-3.13,3.91l-37.52-47.3,1.63-9.79s-6.52-16.31-14.68-27.73c-8.16-11.42-11.42-26.1-11.42-26.1,0,0,16.31,0,17.94-6.52,1.63-6.52,4.89-19.57,11.42-26.1s30.99-4.89,29.36,6.52c-1.63,11.42,6.52,21.21,17.94,9.79,11.42-11.42,9.79-30.99,16.31-42.41,6.52-11.42,35.89-29.36,35.89-29.36l13.05,22.84s6.52-17.94,16.31-29.36c9.79-11.42,17.94-6.52,19.57-16.31,1.63-9.79,4.89-24.47,4.89-24.47,0,0-42.41-24.47-60.35-45.67-17.94-21.21-89.72-26.1-89.72-26.1,0,0-57.87-9.92-38.37-12.59,1.44-.2,3.33-.33,5.74-.46,9.72-.46,23.1,1.17,37.13,3.85,14.88,2.67,30.6,6.52,43.78,9.98,18.2,4.83,31.64,9,31.64,9l5.87,4.18,65.9,46.39s14.68,6.52,24.47,6.52,17.94-6.52,22.84-16.31c4.89-9.79,9.79-16.31,8.16-29.36-1.63-13.05-13.05-24.47-16.31-34.26-2.41-7.18-41.95-6.46-62.64-5.55,3.13-9.98,12.92-25.71,43.06-22.71,43.52,4.31,78.3,20.62,78.3,20.62l32.62,18.53,6.52,21.73,30.47,3.26s14.09-1.11,18.47-4.37c4.37-3.26,19.57-18.47,29.36-18.47s28.25,1.11,34.78-3.26,31.58-22.84,31.58-22.84c0,0,16.31-10.9,32.62-14.16,16.31-3.26,40.19-14.09,40.19-14.09,0,0,19.57-13.05,26.1-16.31s40.26-9.79,40.26-9.79l14.16-14.16s28.25-7.63,31.51-9.79,30.47-13.05,30.47-13.05c0,0,27.14-6.52,30.41-7.63.59-.2,1.5-.39,2.61-.65Z"/>
<path class="cls-9" d="M1854.37,1098.79l11.42-27.73s-14.68-3.26-19.57,4.89c-4.89,8.16-26.1,27.73-26.1,27.73l-19.12-17.88c5.61-3.33,10.31-5.48,12.59-6.59,6.52-3.26,21.21-19.57,21.21-19.57l-10.31-3.85,15.2-4.31,26.1-4.89s24.47,32.62,27.73,48.94l-39.15,3.26Z"/>
<path class="cls-9" d="M1935.93,1177.08c0,4.37-9.79,20.1-13.05,23.36s-13.05,8.74-14.16,18.53c-.07.39-.07.78-.07,1.17-6.72,2.48-11.88,4.24-11.88,4.24h-71.77c-11.42,0-29.36-6.52-39.15-9.79-9.79-3.26-24.47,14.68-29.36,14.68s-11.42-14.68-13.05-22.84c-1.44-7.05-5.28-22.71-6.33-26.75-.13-.65-.2-.98-.2-.98h19.57l14.68-21.21,13.05-3.26s34.26-27.73,39.15-32.62c4.89-4.89,48.94-13.05,48.94-13.05,0,0,12.56-4.32,22.84,4.89,20.45,18.33,40.78,62.05,40.78,63.62Z"/>
<path class="cls-9" d="M1914.72,1257.01s-21.21-29.36-26.1-13.05c-4.89,16.31-16.31,14.68,0,24.47,16.31,9.79,52.2,45.67,61.99,52.2,9.79,6.52,29.36,26.1,39.15,34.26,9.79,8.16,19.57,17.94,11.42,17.94s-89.72,1.63-89.72,1.63l-24.47,21.73,172.91,22.31-32.62-42.41-19.57-26.1s-30.99-37.52-37.52-42.41c-6.52-4.89-55.46-50.57-55.46-50.57Z"/>
<path class="cls-9" d="M1608.06,1341.83c2.94,7.31-90.69-6.46-109.36-9.27-.52-.07-.91-.13-1.31-.2-1.24-.2-1.89-.33-1.89-.33l-24.47,29.36h-11.42l-20.29-.78,3.98-26.95s19.9-11.61,40-22.9l.78,11.48s32.62-16.31,39.15-16.31,40.78,1.63,40.78,1.63l30.99,9.79,13.05,24.47Z"/>
<path class="cls-9" d="M1803.8,996.02s-58.72-4.89-75.03-4.89-40.78,4.89-40.78,4.89c0,0-81.56,35.89-88.08,39.15-6.52,3.26-50.57,4.89-52.2,21.21-1.63,16.31,4.89,22.84,4.89,22.84l8.16,19.57-4.89,16.31-14.68-22.84-13.05-14.68-29.36-8.16s-17.94,6.52-13.05,9.79,16.31,21.21,21.21,24.47c4.89,3.26,14.68,14.68,14.68,14.68l-9.79,16.31,13.05,9.79,6.52,19.57-1.63,13.05-22.84,8.16h-1.37l-1.37-5.42,15.27-9.79-4.37-19.57-5.42-6.52-15.27,5.42-53.24,21.73-19.57,1.11-1.11-14.16s13.05,0,16.31-1.04c3.26-1.11,21.73-9.79,21.73-9.79l9.79-8.74-2.15-5.42-17.42,1.11s-11.94,10.83-15.2,11.94-15.2,1.11-15.2,1.11l-8.74-4.37-1.04-13.05,11.94-5.42,17.42-2.22,7.57-8.68s-17.36-1.11-21.73-1.11h-15.2v-11.94l13.05-1.11h18.47l9.79-5.42s0-10.9-7.63-10.9h-20.62l-8.74-1.04,3.26-12.01s9.79-3.26,15.27-2.15c5.42,1.11,20.62-1.11,20.62-1.11,0,0,7.63-2.15,16.31-2.15s14.16-1.11,25.05-4.37c10.83-3.26,16.31-6.52,22.84-6.52s17.36,1.11,20.62,0c3.26-1.04,106.61-46.72,106.61-46.72l39.15-19.57,76.08-12.01h31.58l13.57,20.68Z"/>
<path class="cls-9" d="M1722.24,1235.81c-19.57,4.89-76.67,21.21-94.61,22.84-12.01,1.11-39.41,6.59-61.07,10.05,11.16-9.92,25.97-22.12,31.71-23.1,5.87-.98,7.05-9,15.86-19.84,28.64-3.85,72.36-9.53,82.02-9.53,14.68,0,16.31-16.31,9.79-21.21-2.81-2.09-9.46-6-15.53-9.98,11.68-2.81,21.27-3.91,27.08-4.37,1.44,3,2.87,5.87,4.76,7.83,4.89,4.89,14.68,8.16,14.68,17.94s4.89,24.47-14.68,29.36Z"/>
<polygon class="cls-12" points="1495.51 1340.75 1508.56 1384.25 1384.58 1540.84 1371.54 1488.64 1495.51 1340.75"/>
<path class="cls-1" d="M2047.31,1636.2c-.07.07-.15.13-.24.21-4.16,3.69-18.39,15.97-38,32.19-27.01,22.44-244.59,178.85-332.5,249.05-210.43,168.01-394.29,339.48-507.3,445.31-16.78,15.71-38.46,37-64.19,62.92-123.97,124.91-341.99,357.41-559.71,592.23-178.96,193.02-357.72,387.61-483.87,525.31v-59.92c118.1-140.54,278.14-327.64,442.24-509.36,14.9-16.5,29.79-32.91,44.67-49.23,54.77-60.07,109.3-118.83,162.68-175.45,7.11-7.54,14.2-15.05,21.27-22.51,107.25-113.25,209.31-217.31,298.66-305.29,18.37-18.09,36.2-35.5,53.43-52.17,117.57-113.8,264.71-223.35,395.85-326.24,164.3-128.93,309.86-227.46,426.27-311.04,25.97-18.66,70.14-43.71,91.34-58.72,2.68-1.89,5.35-3.79,7.9-5.61,0,0,.15-.11.43-.32,15.21-11.01,27.92-20.78,38.46-29.26.17-.13.34-.26.5-.39.71-.58,1.42-1.15,2.11-1.71Z"/>
<path class="cls-12" d="M2117.25,1565.57c-9.98,15.86-27.99,31.84-27.99,31.84,0,0-10.9,13.31-40.91,37.91,0,0-.26.26-.85.72-3.52,3.13-41.69,31.84-41.69,31.84l-275.41-57.71,33.41-22.67.2-.13,111.57-70.99,236.52,47.3,5.15,1.89Z"/>
<path class="cls-9" d="M1644.79,831.99l-.85,20.49-21.21,8.16-41.76-7.44c-5.29-7.5-10.5-14.42-11.55-15.92-2.15-3.26-17.36-20.68-17.36-20.68,0,0,61.99-3.26,78.3,7.63,4.11,2.74,9.13,5.35,14.42,7.76Z"/>
<path class="cls-9" d="M1794.01,893.26l-13.05,14.68s-11.42-4.89-16.31-8.16c-4.89-3.26-32.1-35.36-32.1-35.36,10.9,2.22,28.32,6.52,37,6.52,6.26,0,12.53,1.17,15.53,1.83h.07l8.87,20.49Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

494
wwwroot/chatbot.svg 100644
View File

@ -0,0 +1,494 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 619.39 674.02">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient-15);
}
.cls-2 {
fill: url(#linear-gradient-13);
}
.cls-3 {
fill: url(#linear-gradient-2);
}
.cls-4 {
fill: #1b5317;
}
.cls-5 {
fill: url(#linear-gradient-10);
}
.cls-6 {
fill: url(#linear-gradient-12);
}
.cls-7 {
fill: #cb493c;
}
.cls-8 {
fill: #a2e584;
}
.cls-9 {
fill: #46a519;
}
.cls-10 {
fill: #479446;
}
.cls-11 {
fill: #fff;
}
.cls-12 {
fill: #4d9223;
}
.cls-13 {
fill: url(#linear-gradient-4);
}
.cls-14 {
fill: #96a8a7;
}
.cls-15 {
fill: #103034;
}
.cls-16 {
fill: url(#linear-gradient-3);
}
.cls-17 {
fill: url(#linear-gradient-5);
}
.cls-18 {
fill: url(#linear-gradient-22);
}
.cls-19 {
fill: url(#linear-gradient-8);
}
.cls-20 {
fill: #3f1422;
}
.cls-21 {
fill: #9bd23e;
}
.cls-22 {
fill: #2c7531;
}
.cls-23 {
fill: url(#linear-gradient-14);
}
.cls-24 {
fill: #cfea77;
}
.cls-25 {
fill: url(#linear-gradient-20);
}
.cls-26 {
fill: #728685;
}
.cls-27 {
fill: url(#linear-gradient-17);
}
.cls-28 {
fill: url(#linear-gradient-7);
}
.cls-29 {
fill: url(#linear-gradient-9);
}
.cls-30 {
fill: #06240b;
}
.cls-31 {
fill: url(#linear-gradient-11);
}
.cls-32 {
fill: url(#linear-gradient-19);
}
.cls-33 {
fill: #80af45;
}
.cls-34 {
fill: url(#linear-gradient-6);
}
.cls-35 {
fill: #fd705c;
}
.cls-36 {
fill: url(#linear-gradient-21);
}
.cls-37 {
fill: #e16d2b;
}
.cls-38 {
fill: #051f1b;
}
.cls-39 {
fill: #40a511;
}
.cls-40 {
fill: #a9b9b8;
}
.cls-41 {
fill: #fefefe;
}
.cls-42 {
fill: url(#linear-gradient-16);
}
.cls-43 {
fill: #e2f597;
}
.cls-44 {
fill: url(#linear-gradient);
}
.cls-45 {
fill: #385355;
}
.cls-46 {
fill: url(#linear-gradient-23);
}
.cls-47 {
fill: #3aa00a;
}
.cls-48 {
fill: #fcfdd1;
}
.cls-49 {
fill: url(#linear-gradient-18);
}
</style>
<linearGradient id="linear-gradient" x1="2073.86" y1="-422.97" x2="1629.67" y2="297.58" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#217038"/>
<stop offset="1" stop-color="#75ba47"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="1932.43" y1="-380.88" x2="1421.86" y2="171.61" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b3dd4f"/>
<stop offset="1" stop-color="#f4fd73"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="1645.04" y1="95.45" x2="1415.08" y2="359.61" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#82c14c"/>
<stop offset="1" stop-color="#bee06b"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="2164.08" y1="451.47" x2="2054.71" y2="186.52" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#000"/>
<stop offset="1" stop-color="#011304"/>
</linearGradient>
<linearGradient id="linear-gradient-5" x1="2159.25" y1="368.63" x2="2093.62" y2="479.25" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b6f13c"/>
<stop offset="1" stop-color="#fffc75"/>
</linearGradient>
<linearGradient id="linear-gradient-6" x1="1536.49" y1="-470.46" x2="1433.81" y2="91.73" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3d9541"/>
<stop offset="1" stop-color="#a1d05f"/>
</linearGradient>
<linearGradient id="linear-gradient-7" x1="1825.55" y1="-857.69" x2="1556.77" y2="-592.18" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b0db4b"/>
<stop offset="1" stop-color="#edf96e"/>
</linearGradient>
<linearGradient id="linear-gradient-8" x1="1820.57" y1="-434.77" x2="1618.82" y2="-987.58" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#247231"/>
<stop offset="1" stop-color="#429045"/>
</linearGradient>
<linearGradient id="linear-gradient-9" x1="1554.56" y1="-829.49" x2="1459.45" y2="-533.23" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#5bac4b"/>
<stop offset="1" stop-color="#b7da69"/>
</linearGradient>
<linearGradient id="linear-gradient-10" x1="1986.59" y1="-1068.58" x2="1930.56" y2="-1273.94" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#237131"/>
<stop offset="1" stop-color="#398a3a"/>
</linearGradient>
<linearGradient id="linear-gradient-11" x1="2023.71" y1="-1247.08" x2="1913.69" y2="-1097.39" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#5baa46"/>
<stop offset="1" stop-color="#a6d264"/>
</linearGradient>
<linearGradient id="linear-gradient-12" x1="1595.68" y1="-1262.35" x2="1400.33" y2="-1097.04" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#247435"/>
<stop offset="1" stop-color="#549e45"/>
</linearGradient>
<linearGradient id="linear-gradient-13" x1="1453.21" y1="-1226.38" x2="1386.07" y2="-1093.93" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6ab14c"/>
<stop offset="1" stop-color="#bfe169"/>
</linearGradient>
<linearGradient id="linear-gradient-14" x1="2217.75" y1="-873.23" x2="2106.77" y2="-775.97" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4da044"/>
<stop offset="1" stop-color="#a5d260"/>
</linearGradient>
<linearGradient id="linear-gradient-15" x1="1300.08" y1="-874.29" x2="1201.9" y2="-765.71" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#55a641"/>
<stop offset="1" stop-color="#bee069"/>
</linearGradient>
<linearGradient id="linear-gradient-16" x1="1306.81" y1="-832.94" x2="1370.18" y2="-844.84" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1d6f1f"/>
<stop offset="1" stop-color="#3b8544"/>
</linearGradient>
<linearGradient id="linear-gradient-17" x1="1379.69" y1="-605.71" x2="1306.6" y2="-581.3" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6db64f"/>
<stop offset="1" stop-color="#a9cb5e"/>
</linearGradient>
<linearGradient id="linear-gradient-18" x1="1397.59" y1="-616.5" x2="1357.64" y2="-596.65" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2a6f34"/>
<stop offset="1" stop-color="#388a37"/>
</linearGradient>
<linearGradient id="linear-gradient-19" x1="1110.01" y1="-107.13" x2="1073.75" y2="49.14" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#88c351"/>
<stop offset="1" stop-color="#dbeb8a"/>
</linearGradient>
<linearGradient id="linear-gradient-20" x1="2357.47" y1="-104.85" x2="2277.88" y2="-92.52" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c7126"/>
<stop offset="1" stop-color="#448e4a"/>
</linearGradient>
<linearGradient id="linear-gradient-21" x1="1323.2" y1="423.85" x2="1285.03" y2="490.59" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#5ea846"/>
<stop offset="1" stop-color="#83c350"/>
</linearGradient>
<linearGradient id="linear-gradient-22" x1="1229.07" y1="-145.2" x2="1072.9" y2="-38.47" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#0c3a35"/>
<stop offset="1" stop-color="#4c5b5f"/>
</linearGradient>
<linearGradient id="linear-gradient-23" x1="1993.18" y1="-1292.96" x2="1993.92" y2="-1283.03" gradientTransform="translate(8.01 328.71) scale(.25 -.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#526e78"/>
<stop offset="1" stop-color="#2e503d"/>
</linearGradient>
</defs>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<g>
<g>
<path d="M183.8,40.59c-29.17-9.15-60.1-14.59-90.37-10.3-30.27,4.29-59.9,19.26-77.25,44.43C1.22,96.42-3.2,126.35,7.7,150.73c11.06,24.74,36.59,41.2,61.85,48.53,21.99,6.38,45.18,7.21,68.08,7.3,22.9.09,45.94-.51,68.55,3.14,11.46,1.86,20.06,5.54,29.33,12.29,6,4.37,10.66,10.24,16.19,15.15,3.32,2.95,11.25,11.18,15.81,7.3,1.87-1.59,11.87-15.15,11.81-17.61-.06-2.46-1.14-4.17-1.65-6.58-2.88-13.79-7.29-18.24,2.38-28.38,9.16-9.61,22.02-15.67,30.14-26.16,41.96-54.16-91.89-114.29-126.39-125.11Z"/>
<path d="M251.77,239.42c-.43-.4-.82-.76-1.16-1.06-2.21-1.96-4.3-4.09-6.33-6.15-3.05-3.11-6.21-6.32-9.74-8.9-9.25-6.72-17.54-10.2-28.62-11.99-19.33-3.13-39.37-3.13-58.73-3.11-3.19,0-6.38,0-9.56,0-21.16-.08-45.65-.72-68.53-7.36-29.35-8.51-52.86-26.99-62.89-49.44-10.73-23.99-7.34-54.46,8.62-77.62,16.51-23.96,45.08-40.4,78.38-45.12,26.92-3.81,56.71-.43,91.09,10.36h0c13.4,4.21,43.63,16.56,71.96,33.36,43.61,25.85,57.7,47.05,61.85,60.28,3.78,12.05,1.55,23.51-6.62,34.05-4.67,6.03-10.87,10.64-16.86,15.11-4.64,3.45-9.43,7.02-13.39,11.17-7.04,7.39-6.03,11.14-3.81,19.37.59,2.18,1.25,4.66,1.86,7.53.18.84.43,1.59.7,2.39.46,1.34.93,2.74.98,4.49.09,3.47-10.92,17.65-12.39,18.91-1.18,1.01-2.49,1.42-3.84,1.42-4.61,0-9.82-4.8-12.96-7.68ZM93.67,31.92c-32.39,4.59-60.14,20.53-76.13,43.73C2.21,97.88-1.06,127.09,9.21,150.06c9.64,21.57,32.37,39.37,60.8,47.62,22.48,6.52,46.69,7.15,67.63,7.23,3.18.01,6.36.01,9.55,0,19.5-.02,39.66-.02,59.26,3.16,11.48,1.86,20.46,5.62,30.03,12.58,3.76,2.73,7.01,6.05,10.16,9.25,1.98,2.02,4.03,4.11,6.16,5.99.35.31.76.69,1.21,1.1,3.07,2.83,9.47,8.71,12.44,6.18,1.87-1.59,10.95-14.23,11.24-16.32-.03-1.25-.39-2.3-.8-3.51-.29-.86-.59-1.74-.81-2.78-.58-2.78-1.24-5.21-1.81-7.35-2.31-8.59-3.71-13.77,4.61-22.5,4.15-4.35,9.06-8.01,13.8-11.54,5.82-4.33,11.83-8.81,16.23-14.48,7.47-9.64,9.51-20.09,6.08-31.05-13.15-41.95-102.39-82.3-131.66-91.48-24.99-7.84-47.48-11.72-68.16-11.72-7.38,0-14.53.49-21.48,1.48Z"/>
</g>
<path d="M25.65,42.47c.44,0,.87-.17,1.2-.52C45.33,22.28,71.95,9.12,101.81,4.89c7.48-1.06,15.28-1.6,23.2-1.6,2.6,0,5.27.06,7.93.17.92.03,1.68-.67,1.71-1.57.04-.91-.67-1.68-1.57-1.71C130.37.06,127.65,0,125,0c-8.07,0-16.03.55-23.66,1.63-30.59,4.34-57.9,17.86-76.89,38.07-.62.66-.59,1.7.07,2.33.32.3.72.45,1.13.45Z"/>
<g>
<path class="cls-11" d="M276.4,51.26c-13.06-8.04-26.55-15.08-38.81-20.86"/>
<path d="M276.39,52.9c.55,0,1.09-.28,1.4-.78.48-.77.24-1.79-.54-2.26-11.82-7.28-24.93-14.33-38.97-20.95-.82-.39-1.8-.04-2.19.79-.39.82-.04,1.8.79,2.19,13.92,6.57,26.92,13.56,38.64,20.77.27.17.57.24.86.24Z"/>
</g>
<path d="M319.66,170.43c.37,0,.75-.13,1.06-.38,4.27-3.58,7.58-6.94,10.4-10.59,10.64-13.73,13.62-29.39,8.64-45.3-2.62-8.36-7.58-16.92-14.74-25.45-.58-.7-1.62-.79-2.32-.2-.7.58-.79,1.62-.2,2.32,6.88,8.19,11.63,16.37,14.12,24.32,4.65,14.83,1.85,29.46-8.1,42.3-2.68,3.46-5.83,6.66-9.91,10.08-.7.58-.79,1.62-.2,2.32.33.39.79.59,1.26.59Z"/>
<g>
<path class="cls-11" d="M193.67,25.78c-29.17-9.15-60.1-14.59-90.37-10.3-30.27,4.29-59.9,19.26-77.25,44.43-14.96,21.7-19.38,51.63-8.48,76.02,11.06,24.74,36.59,41.2,61.85,48.53,21.99,6.38,45.18,7.21,68.08,7.3,22.9.09,45.94-.51,68.55,3.14,11.46,1.86,20.06,5.54,29.33,12.29,6,4.37,10.66,10.24,16.19,15.15,3.32,2.95,11.25,11.18,15.81,7.3,1.87-1.59,2.58-4.22,2.52-6.68-.06-2.46-.78-4.85-1.28-7.26-2.88-13.79,1.65-28.5,11.31-38.64,9.16-9.61,22.02-15.67,30.14-26.16,41.96-54.16-91.89-114.29-126.39-125.11Z"/>
<path d="M261.65,224.61c-.43-.4-.82-.76-1.16-1.06-2.21-1.96-4.3-4.09-6.33-6.15-3.05-3.11-6.21-6.32-9.74-8.9-9.25-6.72-17.54-10.2-28.62-11.99-19.33-3.13-39.36-3.13-58.73-3.11-3.19,0-6.38,0-9.56,0-21.16-.08-45.65-.72-68.53-7.36-29.35-8.51-52.86-26.99-62.89-49.44-10.73-23.99-7.34-54.46,8.62-77.62,16.51-23.96,45.08-40.4,78.38-45.12,26.92-3.81,56.71-.43,91.09,10.36h0c13.4,4.21,43.63,16.56,71.96,33.36,43.61,25.85,57.7,47.05,61.85,60.28,3.78,12.05,1.55,23.51-6.62,34.05-4.67,6.03-10.87,10.64-16.86,15.11-4.64,3.45-9.43,7.02-13.39,11.17-9.44,9.91-13.61,24.15-10.89,37.17.12.57.25,1.15.39,1.72.43,1.87.88,3.8.93,5.83.08,3.32-1.05,6.23-3.1,7.97-1.18,1.01-2.49,1.42-3.84,1.42-4.61,0-9.82-4.8-12.96-7.68ZM103.54,17.11c-32.39,4.59-60.14,20.53-76.13,43.73-15.33,22.24-18.6,51.44-8.33,74.41,9.64,21.57,32.37,39.37,60.8,47.62,22.48,6.52,46.69,7.15,67.63,7.23,3.18.01,6.37.01,9.55,0,19.51-.02,39.66-.02,59.26,3.16,11.48,1.86,20.46,5.62,30.03,12.58,3.76,2.73,7.01,6.05,10.16,9.25,1.98,2.02,4.03,4.11,6.16,5.99.35.31.76.69,1.21,1.1,3.07,2.83,9.47,8.71,12.44,6.18,1.29-1.1,2-3.06,1.94-5.38-.04-1.7-.43-3.38-.85-5.17-.14-.6-.27-1.19-.4-1.79-2.94-14.06,1.55-29.43,11.73-40.11,4.15-4.35,9.06-8.01,13.8-11.54,5.82-4.33,11.83-8.81,16.23-14.48,7.47-9.64,9.51-20.09,6.08-31.05-13.15-41.95-102.39-82.3-131.66-91.48-24.99-7.84-47.48-11.72-68.16-11.72-7.38,0-14.53.49-21.48,1.48Z"/>
</g>
</g>
<path class="cls-41" d="M572.37,178.32c4.12-.24,7.69.38,11.09,2.82,4.34,3.11,7.41,8.28,8.23,13.54,1.12,7.25-2.22,13.77-3.11,20.82-.63,4.97.22,10.04.08,15.04-.49,17.02-6.15,28.52-16.01,41.89,2.02,3.32,4.14,6.63,5.89,10.1s3.16,7.45,5.32,10.66c2.43.97,4.92,1.75,7.3,2.84,6.85,3.13,12.91,8.56,16.87,14.96,3.34,5.4,6.21,11.04,8.07,17.13,4.18,13.71,4.27,33.87.91,47.89-3.53,14.72-11.05,28.09-25.36,34.49-1.95.87-8.19,2.51-9.2,3.42-2.92,2.62-6.54,9.09-9.63,12.57-8.92,10.03-19.15,15.93-30.39,22.87,5.66,3.99,16.78,17.97,20.52,23.93,1.97,3.15,3.39,6.66,5.58,9.66,2.5,3.42,6.07,5.76,8.32,9.49,2.13,3.52,2.86,7.52,4.71,11.11,1.13,2.2,2.84,4.15,4.12,6.28,3.33,5.52,5.81,11.87,7.11,18.18,2.52,12.19.72,25.66-6.27,36.11-6.48,9.68-16.87,17.98-28.52,20.17-7.05,1.33-14.56.44-20.52-3.68-1.43,1.27-2.88,2.42-4.45,3.52,8.33,4.9,15.68,10.9,20.55,19.4,3.93,6.86,6.4,15.23,6.06,23.18-.12,2.83-.74,5.66-.59,8.51.29,5.2,1.63,9.68.17,14.89-1.72,6.14-6.46,11-11.94,14.02-20.11,11.12-50.93,12.2-72.74,5.93-11.47-3.29-29.49-12.05-35.41-22.74-6.21,9.96-18.7,16.78-29.46,20.8-19.62,7.32-45.09,7.74-65.1,1.67-4.63-1.4-8.98-3.47-13.37-5.48-2.9.92-5.46,2.12-8.55,2.31-2.91.18-5.93-.51-8.85-.64-2.7-.12-5.38-.03-8.08-.24-10.43-.82-20.23-4.14-28.08-11.27-8.41-7.65-10.09-15.68-12.04-26.38-.7-3.86-1.53-7.58-1.7-11.52-.09-5.63.68-13.3,4.45-17.76,2.76-3.27,7.48-5.21,11.67-5.62,4.4-.42,7.9.15,11.57,2.68,1.22.84,2.39,1.76,3.8,2.25,2.17.76,4.65.85,6.89,1.36,7.17,1.61,13.35,4.62,19.03,9.27,5.04-12.92,16.84-20.95,28.66-27.01-.67-2.5-.7-5.06-.55-7.62-8.28,1.88-6.97,3.61-13.09,7.33-6.2,3.78-14.52,4.02-21.42,2.35-13.13-3.18-22.84-12.68-29.65-23.88-5.79-9.53-6.17-23.98-3.53-34.61,2.85-11.49,12.81-28.25,19.75-38.04,2.6-3.67,5.54-7.08,8.1-10.8,5.57-8.09,13.79-21.98,22.06-26.98-7.83-3.01-20.37-12.1-26.64-17.97-3.02-2.83-5.74-5.97-8.41-9.12-2.58-3.04-4.63-6.47-7.18-9.54-5.67-1.65-11.32-3.41-16.22-6.83-7.93-5.54-14.45-14.68-16.14-24.29-.56-3.18-.3-6.35-.5-9.55-.34-5.37-1.21-10.7-.83-16.1.22-3.07,1.29-6.04,1.75-9.07,2.04-13.51,3.52-27.26,12.27-38.46,2.03-2.6,4.27-5.38,6.66-7.65,1.82-1.73,3.88-3.25,5.8-4.88,3.4-2.9,6.73-6.11,9.59-9.55,2.93-3.53,5.56-7.5,8.18-11.27,2.45-3.52,5.01-7.03,7.29-10.67,1.49-2.37,2.6-4.96,4.13-7.31,1.7-2.61,4.13-4.68,5.9-7.26l.22-.33c-2.61-2.13-5.28-4.27-7.66-6.66-7.39-7.43-9.87-15.69-9.83-26.05.04-9.37,2.82-18.13,9.6-24.79,6.74-6.61,15.32-10.68,24.86-10.58,9.89.11,19.59,4.6,26.4,11.71,6.42,6.7,10.34,15.94,10.1,25.27,6.02-3.33,17.9-5.79,24.76-7.14,8.66-1.7,17.65-3.2,26.46-3.78,3.36-.22,6.77-.15,10.14-.16,13.21-.04,26.33.92,39.31,3.49,8.42,1.67,16.65,4.19,25.03,6.05,1.98-3.43,3.45-6.64,6.03-9.73,7.79-9.36,22.27-16.61,33.8-20.09,3.7-1.12,7.54-1.72,11.24-2.84,8.25-2.5,15.86-5.28,24.58-6.04Z"/>
<path class="cls-38" d="M507.14,236.92l.1-.4c.53-2.16.61-4.42,1.17-6.59,2.51-9.71,8.01-17.59,16.58-22.9,3.36-2.08,7.01-3.56,10.76-4.77,7.12-2.29,14.66-2.98,21.86-5.05,4.47-1.28,11.63-6.17,16.01-5.12,1.35.32,2.43,1.05,3.14,2.25,1.41,2.38.79,5.08.07,7.57-1.09,3.8-2.34,7.47-2.79,11.43-.69,6.07.17,12.36-.19,18.47-.82,14.32-7.77,29.77-20.72,37.01-.14.08-.29.16-.44.24,8.99,9.72,15.45,23.78,20.22,35.99.84-.04,1.69-.08,2.52,0,1.62.16,3.01,1.59,4.49,2.22,1.65.7,3.46,1.12,5.15,1.75,3.83,1.43,7.08,4.24,9.61,7.4,10.04,12.52,11.39,32.4,9.57,47.84-1.22,10.36-4.62,22.97-13.27,29.65-3.57,2.75-7.03,3.47-11.21,4.75-1.39.42-2.87,1.09-4.3,1.27-.82.1-1.7-.04-2.51-.15-2.06,3.81-4.12,7.59-6.64,11.12-10.61,14.9-27.29,24.39-44.12,30.68-5.01,1.88-10.05,3.63-15.34,4.51,2.83.37,5.44.98,8.08,2.06,18.86,7.75,35.67,28.27,43.41,46.89,4.31.84,6.76,3.68,7.7,7.93.32,1.44.41,3.08.96,4.46.68,1.71,2.21,3.14,3.31,4.59,6.44,8.48,10.47,20.3,8.93,31-1.26,8.77-6.14,16.47-13.23,21.71-4.53,3.35-10.92,6.45-16.71,5.51-2.42-.4-4.55-1.49-5.95-3.55-2.92-4.3-1.11-10.01-.31-14.73-1.56,3.33-3.23,6.46-6.87,7.91-2.49,1-5.26.75-7.68-.33-3.71-1.65-6.4-5.01-7.85-8.73-3.79-9.67-.43-20.01,3.46-29.02-1.52-1.41-2.55-2.96-2.75-5.08-.21-2.32.7-4.23,2.1-6-1.66-4.88-3.29-10.17-5.87-14.65.35,2.84.87,5.66,1.15,8.52.53,5.7.62,11.43.26,17.14-.96,16.11-5.41,26.26-15.57,38.65.27,8.11.17,16.26.18,24.37.31,0,.62,0,.93.01,1.96.07,4.01.52,5.35,2.08,1.5,1.75,1.43,3.91,1.3,6.06,1.96.09,3.89.29,5.82.68,9.07,1.85,18.05,7.4,23.18,15.18,5.95,9.03,5.24,18.44,3.17,28.57,1.3,1.18,2.24,2.38,2.71,4.1.51,1.83.19,3.69-.82,5.29-3.67,5.84-16.55,9.52-22.92,10.79-20.74,4.14-44.4,2.11-62.28-9.92-5.02-3.38-12.6-9.64-13.67-16.01-.79-4.65,2.62-5.6,2.94-7.34.43-2.32.07-5.05.19-7.44.41-8.31,3.62-14.19,8.28-20.85-.33-.67-.65-1.39-.79-2.12-.37-1.92.06-3.91,1.2-5.5,1.33-1.86,3.2-2.82,5.42-3.17l.33-5.53c-3.67.96-7.61,1.43-11.38,1.85-13.48,1.5-26.35.82-39.71-1.26.09,1.61.09,3.23.12,4.85.86.1,1.64.26,2.44.61,1.94.86,3.73,2.36,4.51,4.38.81,2.09.43,3.96-.5,5.92.89.96,1.68,2.04,2.43,3.11,5.16,7.31,7.42,15.99,5.91,24.87.44.28.89.56,1.31.89,1.39,1.1,2.39,3.05,2.51,4.82.25,3.61-2.51,7.35-4.8,9.92-11.37,12.77-29.08,18.62-45.75,19.64-13.37.82-29.3-.96-41.31-7.1-1.82-.93-3.75-1.9-5.26-3.29-1.63-1.49-2.71-3.42-2.72-5.66-.02-2.52,1.18-4.17,2.86-5.87-.74-2.62-1.26-5.31-1.54-8.02-.85-8.54,1.43-16.62,6.91-23.25,6.63-8.02,15.71-12.16,25.94-13.18,0-2.2.17-4.68,1.78-6.37,1.51-1.58,3.65-1.78,5.7-1.85.05-7.53,0-15.07-.11-22.6-2.9-2.95-5.59-5.93-7.91-9.38-11.2-16.61-12.51-38.55-8.74-57.76-2.64,4.69-4.14,10.27-5.94,15.34,1.49,1.6,2.39,3.21,2.44,5.45.06,2.43-.97,4.29-2.64,5.97,3.68,7.25,6.23,15.31,5.01,23.54-.72,4.89-3.25,10.02-7.36,12.93-2.36,1.67-5.17,2.68-8.07,2.12-4.42-.86-6.36-4.08-8.6-7.53.28,1.19.55,2.38.81,3.58.71,3.32,1.23,7.15-.81,10.12-1.5,2.19-4.03,3.38-6.61,3.76-5.83.85-12.53-2.46-17.06-5.87-6.79-5.01-11.25-12.57-12.35-20.93-1.3-10,1.84-20.39,7.05-28.87,1.39-2.27,3.67-4.37,4.78-6.7,1.54-3.21.12-5.93,3.15-9.71,1.49-1.86,3.46-2.6,5.76-2.8,1.45-3.75,3.42-7.43,5.46-10.89,9.67-16.33,24.51-33.08,43.47-37.95-4.84-1.29-9.61-2.81-14.31-4.56-21.6-7.92-41.85-20.85-51.86-42.45-.1,0-.19.02-.29.03-.83.08-1.73.22-2.56.11-1.27-.17-2.53-.77-3.76-1.13-2.91-.86-5.78-1.43-8.51-2.81-7.31-3.69-11.28-10.58-13.71-18.14-5.2-16.18-5.53-40.29,2.4-55.49,2.94-5.63,7.15-10.65,13.18-13.05,2.01-.8,4.15-1.26,6.15-2.06,1.66-.66,2.9-1.75,4.66-2.3l2.64.61c7.68-22.61,24.8-45.34,45.34-57.7-1.96-2.89-3.86-5.95-5.46-9.06-1.07.23-2.15.41-3.24.45-5.67.18-11.18-1.93-15.29-5.85-4.13-4-6.51-9.48-6.59-15.23-.13-5.68,2.01-11.18,5.95-15.27,3.97-4.02,9.36-6.3,15.01-6.35,5.94-.04,11.24,2.24,15.44,6.4,4.11,4.07,6.27,9.59,6.26,15.37-.02,6.14-2.68,11.4-6.96,15.65,1.6,2.54,3.17,5.1,4.72,7.66,2.92-1.31,5.71-2.93,8.6-4.32,4.91-2.32,9.95-4.35,15.09-6.08,36.55-12.3,76.09-12.45,112.73-.44,5.61,1.88,11.11,3.83,16.42,6.45Z"/>
<path class="cls-44" d="M507.14,236.92l.1-.4c.53-2.16.61-4.42,1.17-6.59,2.51-9.71,8.01-17.59,16.58-22.9,3.36-2.08,7.01-3.56,10.76-4.77,7.12-2.29,14.66-2.98,21.86-5.05,4.47-1.28,11.63-6.17,16.01-5.12,1.35.32,2.43,1.05,3.14,2.25,1.41,2.38.79,5.08.07,7.57-1.09,3.8-2.34,7.47-2.79,11.43-.69,6.07.17,12.36-.19,18.47-.82,14.32-7.77,29.77-20.72,37.01-.14.08-.29.16-.44.24-1.65.59-3.23,1.4-4.81,2.14-.22.55-.21.29-.13.76,6.93,8.08,21.1,30.22,20.28,40.64-.35,4.49-.94,8.95-1.21,13.44-.79,14.1-.96,28.23-.53,42.35.28,8.82.61,17.53,2.52,26.18-2.73,5.64-5.74,11.77-9.68,16.64-8.02,9.93-26.69,20.92-38.7,25.12-5.22,1.83-10.68,3.67-16.05,5-3.6.89-7.27,1.49-10.9,2.25-38.09,8.09-77.45,8.18-115.58.28-11.94-2.52-24.37-5.9-35.39-11.23-6.53-3.16-21.29-11.01-24.6-16.99-1.46-1.45-2.83-2.93-4.15-4.51-.15-3.9-2.06-7.5-2.29-11.41-.34-5.71.08-11.55-.03-17.28-.23-12.09-1.73-28.9-4.54-40.5-1.25-9.43-1.34-18.96-2.6-28.42-.2-1.48-.64-3.42-.32-4.87.03-.11.06-.23.09-.34,1.2-4.84,4.5-12.38,7.22-16.6.03-.09.05-.18.08-.26,1.37-3.36,3.91-6.88,6-9.87,10.92-15.64,25.53-27.91,42.39-36.76,36.49-19.14,85.21-22.71,124.46-10.49,7.77,1.8,15.42,5.39,22.71,8.57l.3-.45c.17-1.63.42-3.98-.11-5.53Z"/>
<path class="cls-3" d="M383.97,280.26c.11-.06.21-.12.33-.17,2.61-1.15,9.48-2.57,12.63-3.29,26.2-5.92,53.43-5.47,79.42,1.32,2.39.62,5.22.92,7.47,1.82-.85,1.47-1.43,2.92-.99,4.64.27,1.05.97,2.01,1.95,2.49,1.79.89,10.17,1.31,13.1,1.98,7.33,1.69,13.54,5.41,20.06,8.93-.13,3,9.76,14.38,11.96,17.72,2.07,3.08,3.82,6.36,5.22,9.79,3.33,8.2,4.24,17.46,3.29,26.23-.98,9.13-4.13,17.95-7.07,26.59l-.45.12c-1.46,4.69-9.73,20.55-13.9,22.53-.1.04-.2.07-.29.1v.07c-3.24,3.02-7.64,5.28-11.51,7.39-23.95,13.04-55.27,17.84-82.33,16.89-21.35-.76-43-6.76-63.73-11.6-5.01-1.17-11.34-4.54-16.38-4.28-.98-.44-1.93-.93-2.89-1.42-3.09-1.16-6.79-2.21-9.55-4.02-1.06-.7-1.86-1.76-2.89-2.5-.08-.05-.15-.1-.23-.15-1.81-2.21-2.49-4.54-3.15-7.27l-.3-.09c-.68-3.39-2.8-6.44-4.01-9.69-5.32-14.3-2.38-41.57,2.55-56.19,1.64-4.86,4.34-9.39,6.49-14.04,1.45-2,2.61-4.23,4.07-6.25,2.43-3.37,10.19-12.19,14.2-13.44.39-.12.44.01.76.19v.83c-.89,1.04-2.27,2.32-2.59,3.65.12.39.07.58.45.8.5.29.91.29,1.47.35,4.61-3.76,12.86-8.32,18.81-9.75,4.86-2.02,10.55-2.34,15.74-2.85l.29-.12c.3-.13.31-.13.63-.34,1.08-.7,1.93-2.02,2.19-3.27.32-1.54.07-2.42-.78-3.7Z"/>
<path class="cls-48" d="M381.92,287.57c.09.04.17.08.26.12,2.14,1,4.12.31,6.22-.49,2.28-.88,6.62-3.07,9.06-1.89.34.17.37.42.53.74-.04,1.88-1.25,3.25-2.56,4.5-4.76,4.5-11.18,7.3-16.7,10.74-7.58,4.72-14.96,10.38-21.44,16.52-3.25,3.08-6.02,6.54-8.88,9.97-3.34,4-6.65,7.95-9.8,12.11-1.36,1.8-2.61,3.65-3.77,5.6-1.12,1.89-2.15,4.15-3.63,5.77-.81.89-1.85,1.57-2.85,2.24-.21-4.05-.22-8.07.58-12.07,2.14-10.71,10.15-23.52,17.47-31.63,4.99-5.54,11.5-10.33,17.71-14.45.96-1.55,3.07-2.23,3.41-4.13-.57-.66-.79-.56-1.63-.67,4.86-2.02,10.55-2.34,15.74-2.85l.29-.12Z"/>
<path class="cls-43" d="M365.9,290.54c4.86-2.02,10.55-2.34,15.74-2.85-3.13,2.4-7.26,2.3-10.8,3.71-2.41.96-4.53,2.57-6.72,3.94.96-1.55,3.07-2.23,3.41-4.13-.57-.66-.79-.56-1.63-.67Z"/>
<path class="cls-35" d="M334.09,379.71c6.06-1.4,12.23-.42,17.52,2.88,3.43,2.14,6.13,5.4,7.09,9.38.7,2.9.27,5.93-1.34,8.46-2.56,4.01-7.18,6.32-11.73,7.2-1.92.37-3.85.43-5.8.49-3.09-1.16-6.79-2.21-9.55-4.02-1.06-.7-1.86-1.76-2.89-2.5-.08-.05-.15-.1-.23-.15-1.81-2.21-2.49-4.54-3.15-7.27-.2-1.89.1-3.59.57-5.4.77-1.06,1.19-2.29,2.05-3.26.79-.15.97.11,1.65.52,1.17-2.26,2.55-3.44,4.79-4.55l1.02-1.76Z"/>
<path class="cls-41" d="M333.07,381.47c1.09.48,2.7,1.16,3.15,2.38.33.89.23,1.72-.23,2.54-.7,1.25-2.12,2.23-3.52,2.52-1.09.23-2.12.07-3.01-.62-.65-.51-1.02-1.49-1.19-2.26,1.17-2.26,2.55-3.44,4.79-4.55Z"/>
<path class="cls-33" d="M328.73,314.16c1.45-2,2.61-4.23,4.07-6.25,2.43-3.37,10.19-12.19,14.2-13.44.39-.12.44.01.76.19v.83c-.89,1.04-2.27,2.32-2.59,3.65.12.39.07.58.45.8.5.29.91.29,1.47.35-.04.07-.07.13-.11.2-1.23,2.05-3.23,3.93-4.86,5.69-3.13,3.36-6.43,6.78-9,10.6-10.76,15.96-14.36,45.05-9.9,63.82.5,2.1.94,4.32,1.7,6.34l-.34,1.84c-.47,1.82-.78,3.52-.57,5.4l-.3-.09c-.68-3.39-2.8-6.44-4.01-9.69-5.32-14.3-2.38-41.57,2.55-56.19,1.64-4.86,4.34-9.39,6.49-14.04Z"/>
<path class="cls-35" d="M516.67,401.06c-1.95-1.81-3.64-4.92-3.69-7.59-.06-3.36,1.71-7.09,4.02-9.5,3.55-3.7,8.86-5.44,13.87-5.54-1.46,4.69-9.73,20.55-13.9,22.53-.1.04-.2.07-.29.1Z"/>
<path class="cls-37" d="M324.92,386.93c2.35-3.66,5.13-5.7,9.17-7.22l-1.02,1.76c-2.24,1.11-3.62,2.29-4.79,4.55-.68-.4-.85-.67-1.65-.52-.86.98-1.28,2.2-2.05,3.26l.34-1.84Z"/>
<path class="cls-38" d="M370.79,316.56c4.51-.45,9.33,1.32,12.81,4.14,6.11,4.96,9.17,13.34,9.97,20.96,1.01,9.67-.46,19.64-6.77,27.35-3.66,4.48-8.35,7.02-14.08,7.61-4.57.27-9.09-1.14-12.7-3.96-6.1-4.72-9.24-12.22-10.17-19.7-1.18-9.53.45-20.44,6.56-28.13,3.79-4.78,8.31-7.59,14.39-8.27Z"/>
<path class="cls-22" d="M384.82,351.92c1.44.59,2.63,1.02,3.24,2.58.94,2.43.08,5.52-1.02,7.79-.65,1.35-1.5,2.74-2.65,3.71-.01,0-.02.02-.03.03-2.79,3.55-6.04,6.17-10.67,6.75-3.68.46-7.46-.51-10.34-2.87-.4-.33-.8-.67-1.16-1.04-2.12-2-4.68-4.22-5-7.31-.17-1.71.46-3.47,1.63-4.73.91-.98,2.12-1.6,3.47-1.59,2.17.01,3.72,1.66,5.19,3.04,1.63,1.24,3.47,2.07,5.53,2.19,3,.18,5.33-1.05,7.53-2.95,1.14-1.91,2.74-4.02,4.3-5.6Z"/>
<path class="cls-4" d="M362.18,368.87c-2.12-2-4.68-4.22-5-7.31-.17-1.71.46-3.47,1.63-4.73.91-.98,2.12-1.6,3.47-1.59,2.17.01,3.72,1.66,5.19,3.04-1.81.76-3.03,1.96-3.79,3.79-.91,2.2-.73,4.63-1.49,6.79Z"/>
<path class="cls-4" d="M384.82,351.92c1.44.59,2.63,1.02,3.24,2.58.94,2.43.08,5.52-1.02,7.79-.65,1.35-1.5,2.74-2.65,3.71-.01,0-.02.02-.03.03-1.71-3.15-.81-5.03-3.83-8.51,1.14-1.91,2.74-4.02,4.3-5.6Z"/>
<path class="cls-41" d="M365.81,324.76c1.34.02,2.45.31,3.64.94,1.76.94,2.96,2.55,3.49,4.46.84,2.98.09,6.66-1.45,9.31-1.41,2.43-3.36,3.99-6.07,4.74-1.33-.04-2.53-.23-3.74-.82-1.78-.87-3.04-2.41-3.6-4.31-.87-2.98-.13-6.6,1.36-9.28,1.43-2.56,3.52-4.29,6.35-5.04Z"/>
<path class="cls-38" d="M496.29,316.79c3.92-.46,7.87.43,11.22,2.52,6.41,3.94,10.42,11.68,12.11,18.8,2.19,9.19,1.62,19.8-3.43,27.98-3.33,5.4-8.08,8.89-14.25,10.36-5.03.32-9.16-.38-13.36-3.32-6.19-4.35-9.69-11.6-10.92-18.92-1.55-9.25-.41-21,5.18-28.82,3.24-4.54,7.92-7.7,13.45-8.6Z"/>
<path class="cls-22" d="M511.1,352.56c1.56.82,2.65,1.79,3.81,3.11-.45,2.99-.92,7.46-3.06,9.82-2.3,3.55-4.97,6.04-9.24,6.97-3.74.81-8.01.24-11.22-1.87-1.3-.86-2.46-1.99-3.45-3.19-1.39-1.53-2.76-3.62-3.24-5.64-.71-2.97.45-5.39,1.98-7.85,2.48,1.52,5.06,3.02,7.29,4.89,2.91,1.38,6.07,1.98,9.21.93.74-.25,1.52-.56,2.19-.95,2.17-1.92,4.04-3.88,5.74-6.22Z"/>
<path class="cls-4" d="M486.67,353.91c2.48,1.52,5.06,3.02,7.29,4.89-1.85.48-3.02,1.86-3.96,3.47-.94,1.62-1.51,3.35-2.07,5.12-1.39-1.53-2.76-3.62-3.24-5.64-.71-2.97.45-5.39,1.98-7.85Z"/>
<path class="cls-4" d="M511.1,352.56c1.56.82,2.65,1.79,3.81,3.11-.45,2.99-.92,7.46-3.06,9.82l-.59-.38c-.62-.96-.35-2.63-.34-3.74-1.78-1.28-3.49-1.94-5.56-2.6,2.17-1.92,4.04-3.88,5.74-6.22Z"/>
<path class="cls-41" d="M493,324.76c1.07-.07,2.2-.16,3.24.18,1.84.59,3.25,1.98,4.02,3.73,1.26,2.86.94,7.02-.25,9.86-1.22,2.9-3.31,4.5-6.15,5.61-1.17,0-2.21-.19-3.27-.71-2.03-.99-3.37-2.77-4.07-4.89-.97-2.94-.86-6.34.61-9.09,1.3-2.42,3.27-3.9,5.87-4.67Z"/>
<path class="cls-20" d="M468.05,373.43c1.02.44,1.82.91,2.27,1.98.02,1.62-1.06,2.41-2.1,3.49-.28,6.24-.93,12.6-2.69,18.61-2.47,8.41-7.24,16.2-15.13,20.44-6.62,3.52-14.38,4.24-21.54,2-8.13-2.54-13.49-8.01-17.39-15.37-4.09-8.37-5.43-16.74-6.65-25.83-1.09-.67-2.05-1.11-2.38-2.42.25-.84.72-1.88,1.49-2.37.64-.4,1.22-.05,1.82.26,1.96,1,3.74,2.48,5.64,3.6,3.32,1.96,8.18,3.57,11.94,4.38,11.61,2.5,25.34,1.56,36.1-3.55,3.05-1.45,5.8-3.39,8.63-5.22Z"/>
<path class="cls-35" d="M439.31,398.08c6.98-.37,10.71,1.14,16.94,3.71.8.33,1.96.49,2.62,1.02.25.19.2.18.2.52.02,2.08-2.87,5.52-4.29,7.01-4.82,5.06-10.58,7.05-17.43,7.25-1.33-.06-2.68-.1-4-.28-6.95-.94-12.49-4.79-16.63-10.31,5.73-5.78,14.65-8.47,22.58-8.91Z"/>
<path class="cls-16" d="M311.31,291.71c.03-.09.05-.18.08-.26,1.37-3.36,3.91-6.88,6-9.87,10.92-15.64,25.53-27.91,42.39-36.76,36.49-19.14,85.21-22.71,124.46-10.49-.1.04-.2.09-.31.12-1.38.48-5.74-1.91-6.86-1.61-.57.16-1.08.82-1.49,1.24-.72.11-1.69-.61-2.17-.17-.23.22-.44.7-.61.99.24.33.48.64.73.95-.04.66-.53,1.06-.95,1.52-.03.95-.04,1.9-.09,2.84-.04.63.05.92.28,1.51.8,2.03-.46,7.3-.94,9.51-.43,2-2.47,3.88-3.32,5.78-.71,1.57-1.1,5.18-2.03,6.29-.59.71-1.72,1.23-2.43,1.85-.82.73-1.41,1.9-2.01,2.83-.34-.05-.65-.11-.98-.2l-.32.31.15.57c1.88.89,4.29.92,6.32,1.31,2.43.47,4.84,1.18,7.25,1.73,3.19.72,6.29,1.13,9.37,2.31.35.14.76.22,1.12.32-.59.08-18.71-4.22-21.58-4.67-7.28-1.13-14.45-1.38-21.8-1.64-19.16-.7-32.89-.08-51.53,4.59-3.45.86-7.83,1.49-10.92,3.24,1,.17,1.64-.59,2.67-.56.13.54.09.43-.15.88-.72.27-1.41.49-2.16.67-.27.35-.44.64-.59,1.06-.37.24-.33.28-.79.27-.95-.02-1.04-.05-1.74.59,3.16-.26,4.96-.47,7.61,1.5.85,1.29,1.1,2.17.78,3.7-.26,1.25-1.11,2.57-2.19,3.27-.32.21-.33.2-.63.34l-.29.12c-5.18.51-10.87.82-15.74,2.85-5.95,1.43-14.2,5.98-18.81,9.75-.56-.05-.97-.06-1.47-.35-.38-.22-.33-.41-.45-.8.32-1.33,1.7-2.61,2.58-3.65v-.83c-.31-.18-.36-.31-.75-.19-4.01,1.25-11.76,10.08-14.2,13.44-1.46,2.02-2.62,4.25-4.07,6.25-1.58.81-2.27,4.74-3.32,5.16l-.04-.78c-.11.03-.23.05-.34.08-3.14.86-7.04,2.37-10.32,1.98-1.2-.14-2.31-.71-3.48-.95-.66-.14-.96-.09-1.53.25-.31.7-.53,1.29-1.13,1.8-.33.05-.7.24-.98,0-.87-.77-.79-2.55-1.07-3.61-.2-.76-.35-.76-1.01-1.11-.6-1.12-.67-2.73-.81-3.98-.14-1.23-.42-2.67-.33-3.89.24-3.31,3.82-10.01,5.31-13.21.52-1.12,1.39-2.54,1.56-3.75.02-.15.04-.3.05-.44Z"/>
<path class="cls-38" d="M376.35,278.77c3.16-.26,4.96-.47,7.61,1.5.85,1.29,1.1,2.17.78,3.7-.26,1.25-1.11,2.57-2.19,3.27-.32.21-.33.2-.63.34l-.29.12c-5.18.51-10.87.82-15.74,2.85-5.95,1.43-14.2,5.98-18.81,9.75-.56-.05-.97-.06-1.47-.35-.38-.22-.33-.41-.45-.8.32-1.33,1.7-2.61,2.58-3.65,7.84-8.02,18.08-13.25,28.6-16.72Z"/>
<path class="cls-48" d="M341.3,271.36c-.57-2.33-.97-4.52-.12-6.85,2.28-6.25,15.41-12.87,21.34-15.76,3.89-1.89,9.92-4.79,14.3-3.12,1.9.72,2.52,2.58,3.24,4.3.36,1.11.69,2.2.94,3.35-.61,1.56-1.22,2.97-2.51,4.11-3.03,2.65-6.9,4.38-10.33,6.46-6.09,3.69-12.05,8.02-18.57,10.9-1.76.78-3.31,1.29-5.18.49-.34-.14-.31-.14-.58-.3-.28-.12-.65-.25-.9-.43-1.13-.8-1.34-1.87-1.61-3.14Z"/>
<path class="cls-43" d="M380.06,249.94c.36,1.11.69,2.2.94,3.35-.61,1.56-1.22,2.97-2.51,4.11-3.03,2.65-6.9,4.38-10.33,6.46-6.09,3.69-12.05,8.02-18.57,10.9-1.76.78-3.31,1.29-5.18.49-.34-.14-.31-.14-.58-.3.51-.75,1.53-1.03,1.82-1.87,2.13-.19,3.56-.99,5.39-2.03,5.25-2.99,10.36-6.19,15.54-9.29,3.5-2.09,7.82-3.97,10.73-6.83,1.4-1.37,2.25-3.12,2.76-4.98Z"/>
<path class="cls-43" d="M341.3,271.36c1.28,1.08,2.74,1.35,4.34,1.71-.28.84-1.31,1.12-1.82,1.87-.28-.12-.65-.25-.9-.43-1.13-.8-1.34-1.87-1.61-3.14Z"/>
<path class="cls-24" d="M382.62,240.95c.12,0,.23.02.35.03,1.56.08,4.31-1.15,5.92-1.58,5.95-1.58,21.3-5.52,25.81-.93,1.9,1.94,2.28,4.5,2.18,7.09l-.02.37c-1.34,2.04-2.6,3.28-5.05,3.8-3.99.84-8.14,1-12.17,1.56-3.29.46-6.58,1.26-9.88,1.59-.61.06-1.18.16-1.75-.11-.8-.85-.76-1.77-.73-2.87.03-.94.31-2.28-.1-3.12l-.33-.09c-.22.65-.47,1.58-1.02,2.02-.46.36-1.01.44-1.57.3-1.03-.25-1.91-1.25-2.48-2.08-.96-1.39-1.61-2.98-1.29-4.67.44-.68,1.42-.98,2.14-1.31Z"/>
<path class="cls-43" d="M382.62,240.95c2.84,1.71,2.86,3,4.22,5.74-.22.65-.47,1.58-1.02,2.02-.46.36-1.01.44-1.57.3-1.03-.25-1.91-1.25-2.48-2.08-.96-1.39-1.61-2.98-1.29-4.67.44-.68,1.42-.98,2.14-1.31Z"/>
<path class="cls-48" d="M333.91,271.2c2.3,1.6,3.19,2.69,4.05,5.38l.17.45c.15.4.33.72.54,1.09.78,1.35.82,3.03.39,4.5-.94,3.15-4.94,6.49-7.84,7.9-1.2.58-2.74,1.06-4.06.63-1.11-.36-1.59-1.23-2.09-2.21-.42-.78-.83-1.57-1.22-2.36-.97-2.01-1.54-4.3-.71-6.46,1.71-4.46,6.68-7.12,10.77-8.92Z"/>
<path class="cls-43" d="M337.96,276.58l.17.45c.15.4.33.72.54,1.09.78,1.35.82,3.03.39,4.5-.94,3.15-4.94,6.49-7.84,7.9-1.2.58-2.74,1.06-4.06.63-1.11-.36-1.59-1.23-2.09-2.21,1.3-.06,2.63.14,3.93.26.73-.48,1.42-1.01,2.09-1.57,3.35-2.83,6.53-6.5,6.88-11.05Z"/>
<path class="cls-24" d="M321.94,289.11c.33,0,.6.16.91.28,1.51,1.8,2.09,3.68,2.8,5.87-1.94,5.09-5.08,12-9.84,15.07-.85.21-1.65.47-2.48.09-.83-.99-1-2.11-1.09-3.38-.33-4.8,1.54-12.26,4.81-15.87,1.52-1.69,2.74-1.93,4.89-2.05Z"/>
<path class="cls-43" d="M342.18,282.32c.94-.38,1.84-.88,2.84-.38.55.28.94.76,1.05,1.37.19,1.08-.32,2.22-.99,3.03-.13.05-.26.1-.4.15-.52.19-.94.18-1.48.17l-.11.31c.4.47.78.82,1.27,1.19l.08.26c-.64,2.08-3.03,4.5-4.93,5.49-.74.39-1.63.66-2.46.42-.64-.19-1.09-.68-1.36-1.28-.31-.69-.3-1.49-.34-2.23,0-.04,0-.09,0-.13.27-3.14,4.19-4.73,6.14-6.81.01-.2.02-.41.05-.61.08-.62.17-.6.67-.97Z"/>
<path class="cls-43" d="M342.18,282.32c.94-.38,1.84-.88,2.84-.38.55.28.94.76,1.05,1.37.19,1.08-.32,2.22-.99,3.03-.56-.08-1.11-.15-1.67-.21-.42-.33-.79-.65-1.02-1.14-.4-.84-.47-1.79-.2-2.67Z"/>
<path class="cls-24" d="M335.33,290.7c.27-3.14,4.19-4.73,6.14-6.81.01-.2.02-.41.05-.61.08-.62.17-.6.67-.97-.27.88-.2,1.83.2,2.67.23.49.61.81,1.02,1.14.56.07,1.11.14,1.67.21-.13.05-.26.1-.4.15-.52.19-.94.18-1.48.17l-.11.31c.4.47.78.82,1.27,1.19l.08.26c-1.73-.42-2.57-2.26-3.89-3.37-1.88,1.76-3.76,3.49-5.21,5.64Z"/>
<path class="cls-43" d="M354.37,274.39c.7.29,1.34.6,1.79,1.23.52.73.76,1.61.55,2.5-.35,1.53-1.14,2.12-2.43,2.92-.93-.7-1.74-1.57-2.57-2.38.91-1.4,1.47-3.06,2.66-4.25Z"/>
<path class="cls-4" d="M507.14,236.92l.1-.4c.53-2.16.61-4.42,1.17-6.59,2.51-9.71,8.01-17.59,16.58-22.9,3.36-2.08,7.01-3.56,10.76-4.77,7.12-2.29,14.66-2.98,21.86-5.05,4.47-1.28,11.63-6.17,16.01-5.12,1.35.32,2.43,1.05,3.14,2.25,1.41,2.38.79,5.08.07,7.57-1.09,3.8-2.34,7.47-2.79,11.43-.69,6.07.17,12.36-.19,18.47-.82,14.32-7.77,29.77-20.72,37.01-.14.08-.29.16-.44.24-1.65.59-3.23,1.4-4.81,2.14-.22.55-.21.29-.13.76-.24-.08-.31-.13-.6-.12-1.28.05-3,.88-4.32,1.15-2.95.62-12.55,1.59-15.12.04-2.81-.58-5.41-1.82-8.03-2.95-1.26,3.34-2.37,7-4.2,10.08-1.04-.46-2.69-1.04-3.15-2.2-.77-1.93,2.91-9.04,3.79-11.02-3.89-4.35-6.24-10.01-7.64-15.63-.48-1.96-.5-7.24-1.56-8.42l.3-.45c.17-1.63.42-3.98-.11-5.53Z"/>
<path class="cls-21" d="M570.18,196.79c.85-.21,1.55-.39,2.43-.31.28.23.53.29.52.69,0,.65-.39,1.23-.68,1.79-2.85,1.72-4.01,4.11-4.79,7.25-2.35,9.5-1.17,19.81-5.69,28.8-2.29,2.97-4.24,6.21-6.58,9.13-3.46,4.33-8.99,7.82-13.9,10.24-3.48,1.72-7.24,3-10.55,5.05-1.11.51-7.09,3.29-7.79,3.08l-.18-.28c-.74,1.56-1.38,3.16-2.03,4.75-.49,1.03-.96,2-1.25,3.11-1.26,3.34-2.37,7-4.2,10.08-1.04-.46-2.69-1.04-3.15-2.2-.77-1.93,2.91-9.04,3.79-11.02.23-.98,1.03-2.26,1.45-3.22-.76-1.18-1.37-2.45-1.83-3.77.78-1.31.02-4.65-.16-6.2-.05-.14-.11-.28-.15-.43-.28-1.04-.17-2.62-.18-3.71,0-7.23,1.49-15.33,5.1-21.68.03-.01.06-.03.1-.04.57-.15,1.04-.21,1.54-.58,4.55-3.44,6.82-6.9,12.35-10.07,3.89-2.24,8.36-3.28,12.6-4.65,5.01-1.61,10.1-4,14.42-7,1.07-.74,8.3-7.34,8.65-7.97.14-.25.1-.56.15-.84Z"/>
<path class="cls-13" d="M528.45,243.94l.25-.27c2.93-3.2,5.27-7.14,7.84-10.64,4.46-6.06,9.52-11.79,14.73-17.21,1.47-1.53,2.94-3.24,4.6-4.57l.52.1c.08.69-.32,1.12-.73,1.66-1.53,2.04-3.49,3.8-5.08,5.82-6.06,7.67-12.04,15.68-17.22,23.97,3.14-.99,18.77-6.47,21.05-5.44-.15.58-.22.66-.75,1.02-1.27.85-3.15,1.42-4.58,2-5.19,2.11-11.18,4.88-16.9,4.42-3.47,5.15-7.1,11.57-9.18,17.41-.74,1.56-1.38,3.16-2.03,4.75-.49,1.03-.96,2-1.25,3.11-1.26,3.34-2.37,7-4.2,10.08-1.04-.46-2.69-1.04-3.15-2.2-.77-1.93,2.91-9.04,3.79-11.02.23-.98,1.03-2.26,1.45-3.22.52-1.21,1.15-2.39,1.72-3.57,2.08-4.19,5.5-9.09,6.75-13.45,1.69-5.93,1.01-13.71,3.88-19.1.04-.07.07-.14.11-.21.33,5.4-.25,11.31-1.61,16.55Z"/>
<path class="cls-33" d="M515.6,253.76l.32-.1c1.78,1.41,1.1,5.81,2.89,6.84l.51-.35c-.57,1.18-1.2,2.37-1.72,3.57-.76-1.18-1.37-2.45-1.83-3.77.78-1.31.02-4.65-.16-6.2Z"/>
<path class="cls-12" d="M561.98,235.01c4.51-8.99,3.33-19.3,5.69-28.8.78-3.14,1.94-5.53,4.79-7.25-1.1,4.63-2.3,6.93-2.81,12.05-.71,7.03-.14,14.07-.61,21.09-.84,12.68-6.32,25.49-17.46,32.39-7.95,4.92-17.27,6.14-26.32,3.98-1.06-.25-3.64-.69-4.29-1.5.65-1.59,1.29-3.2,2.03-4.75l.18.28c.7.21,6.68-2.57,7.79-3.08,3.31-2.04,7.07-3.33,10.55-5.05,4.91-2.42,10.44-5.91,13.9-10.24,2.33-2.92,4.29-6.16,6.58-9.13Z"/>
<path class="cls-33" d="M530.95,259.43c3.31-2.04,7.07-3.33,10.55-5.05,4.91-2.42,10.44-5.91,13.9-10.24,2.33-2.92,4.29-6.16,6.58-9.13.62,3.76-2.26,9.67-4.43,12.72-4.19,5.87-12.74,10.07-19.74,11.19-2.35.37-4.7.18-6.85.51Z"/>
<path class="cls-17" d="M563.4,199.8c2.18-1.15,4.4-2.33,6.77-3.01-.05.28-.01.59-.15.84-.35.64-7.58,7.23-8.65,7.97-4.33,3-9.42,5.39-14.42,7-4.24,1.36-8.71,2.41-12.6,4.65-5.52,3.18-7.79,6.63-12.35,10.07-.49.37-.96.44-1.54.58-.03,0-.06.03-.1.04-3.61,6.35-5.11,14.45-5.1,21.68,0,1.09-.1,2.67.18,3.71.04.15.1.29.15.43.18,1.54.94,4.89.16,6.2-.43-.94-.87-1.88-1.25-2.84-3.97-10.14-3.61-22.53.79-32.48,4.58-10.38,14.23-16.37,24.94-19.1,8.17-2.08,14.98-2.51,23.15-5.72Z"/>
<path class="cls-24" d="M563.4,199.8c2.18-1.15,4.4-2.33,6.77-3.01-.05.28-.01.59-.15.84-.35.64-7.58,7.23-8.65,7.97-4.33,3-9.42,5.39-14.42,7-4.24,1.36-8.71,2.41-12.6,4.65-5.52,3.18-7.79,6.63-12.35,10.07-.49.37-.96.44-1.54.58-.03,0-.06.03-.1.04,1.03-2.67,2.83-4.67,4.68-6.81,9.4-10.95,16.44-9.91,28.57-14.41,4.19-1.55,8.23-3.8,12.07-6.06.48-.28,2.89-2.08,3-2.53-1.68.17-3.26,1.8-4.87,1.71-.14,0-.28-.03-.42-.04Z"/>
<path class="cls-34" d="M311.31,291.71c-.02.15-.03.3-.05.44-.17,1.21-1.04,2.63-1.56,3.75-1.49,3.2-5.07,9.9-5.31,13.21-.09,1.22.19,2.66.33,3.89.14,1.25.22,2.86.81,3.98.66.35.81.34,1.01,1.11.28,1.07.2,2.84,1.07,3.61.27.24.65.05.98,0,.6-.51.82-1.1,1.13-1.8.57-.34.87-.39,1.53-.25,1.17.25,2.28.81,3.48.95,3.28.39,7.18-1.12,10.32-1.98.11-.03.22-.05.34-.08l.04.78c1.04-.42,1.73-4.35,3.32-5.16-2.15,4.66-4.84,9.18-6.49,14.04-4.94,14.62-7.88,41.89-2.55,56.19,1.21,3.25,3.33,6.3,4.01,9.69l.3.09c.66,2.72,1.34,5.05,3.15,7.27l-.03.4c3.84,4.31,6.77,7.69,11.72,10.81,18.3,11.51,61.4,19.98,83.45,21.27,12.17.71,27.6.69,39.68-.78-4.69,2.37-11.14,2.91-16.3,3.85-8.44,1.53-16.68,2.16-25.22,2.78-7.91.58-15.88,1.25-23.81.65-9.17-.69-18.18-2.47-27.19-4.2-7.63-1.47-15.31-2.96-22.69-5.39-7.04-2.31-12.83-5.8-19.01-9.76-2.41-1.54-4.81-2.97-7.12-4.66-.86-.63-1.62-1.28-2.68-.76-1.46-1.45-2.83-2.93-4.15-4.51-.15-3.9-2.06-7.5-2.29-11.41-.34-5.71.08-11.55-.03-17.28-.23-12.09-1.73-28.9-4.54-40.5-1.25-9.43-1.34-18.96-2.6-28.42-.2-1.48-.64-3.42-.32-4.87.03-.11.06-.23.09-.34,1.2-4.84,4.5-12.38,7.22-16.6Z"/>
<path class="cls-33" d="M516.68,401.14c4.5,3.7,9.58,4.88,15.29,5.15-7.5,5.78-16.31,8.89-25.21,11.79-26.82,8.77-55.04,12.46-83.22,10.88-2.4-.49-5.09-.48-7.53-.67-5.38-.42-10.79-.76-16.15-1.39-9.74-1.15-20.03-3.06-29.44-5.85-4.9-1.45-9.78-3.36-14.58-5.12-4.23-1.55-9.78-3.35-13.13-6.38,5.05-.26,11.38,3.11,16.38,4.28,20.73,4.83,42.38,10.84,63.73,11.6,27.06.96,58.38-3.84,82.33-16.89,3.88-2.11,8.27-4.36,11.52-7.39Z"/>
<path class="cls-33" d="M517.92,297.99c1.4.66,2.65,1.57,3.94,2.44,2.98,2.86,6.03,5.67,8.67,8.86,9.26,11.21,13.68,25.21,16.17,39.31.63,3.58.46,7.43,1.21,10.93.04,9.32-.39,16.01-2.17,25.19-4.25-4.54-8.26-6.01-14.41-6.4,2.94-8.64,6.09-17.46,7.07-26.59.94-8.77.04-18.03-3.29-26.23-1.4-3.43-3.15-6.71-5.22-9.79-2.2-3.34-12.09-14.72-11.96-17.72Z"/>
<path class="cls-7" d="M531.32,378.32c6.16.39,10.16,1.86,14.41,6.4.7,5.96,1.68,9.17-2.09,14.49-3.34,3.96-7,5.26-11.67,7.08-5.71-.27-10.79-1.46-15.29-5.15v-.07c.09-.03.19-.06.28-.1,4.18-1.98,12.45-17.84,13.9-22.53l.45-.12Z"/>
<path class="cls-22" d="M547.9,359.53c.03-.98.07-1.94.19-2.92.68,3.37.28,15.3-.22,18.86-.26,1.85-1.26,4.35-1.08,6.17.07.77.7,1.36.72,2.16.03,1.05-1.06,1.7-1.12,2.72-.12,2.13.74,4.1.48,6.36l.21.19v-1.48s.38-.26.38-.26c.16.54.24,1.04.3,1.6.45-.59.23-1.41.83-1.66.14,1.86-2.31,5.84-3.55,7.23-.36.39-.74.69-1.18.99-1.49,2.73-3.73,4.42-6.03,6.44-3.29,2.88-6.79,5.75-10.56,7.98-7.07,4.17-16.69,7.29-24.57,9.6-10.03,2.94-20.49,4.51-30.85,5.76-3.5.42-6.97,1.01-10.48,1.36-6.51.64-13.43.88-19.96.89-5.09.01-10.21-.69-15.33-.73,3.19-1.21,11.25.26,14.91.39,4.81.17,9.8-.37,14.62-.59,1.46-.07,3.53.18,4.9-.16.66-.17,1.28-.74,1.57-1.34.05-.1.08-.21.12-.31l-.23-.43c-2.2-.46-5.05.46-7.31.66-2.4.21-4.83.26-7.24.37-8.85.4-17.57.58-26.41-.21.84-.18,1.65-.19,2.52-.21,28.17,1.58,56.4-2.11,83.22-10.88,8.9-2.9,17.71-6.01,25.21-11.79,4.68-1.82,8.34-3.12,11.67-7.08,3.77-5.32,2.79-8.53,2.09-14.49,1.78-9.18,2.21-15.87,2.17-25.19Z"/>
<path class="cls-38" d="M483.81,279.94c1.46-1.34,2.57-1.71,4.57-1.61,8.98.44,26.7,10.96,32.87,17.98.64.72,1.24,1.48,1.8,2.28-.38.61-.73,1.29-1.18,1.84-1.28-.87-2.54-1.77-3.94-2.44-6.52-3.52-12.73-7.24-20.06-8.93-2.93-.68-11.31-1.1-13.1-1.98-.98-.48-1.68-1.45-1.95-2.49-.44-1.72.14-3.17.99-4.64Z"/>
<path class="cls-10" d="M519.7,270.09c2.62,1.13,5.22,2.37,8.03,2.95-1.74-.12-8.71,2.01-9.8,3.24-.54.61-1.01,2.56-1.42,3.37-.2.39-.13.24-.21.74,1.75,1.56,4.29,1.44,6.5,1.31,3.87-.22,13.77-1.72,16.64.82.42.37.7.85.97,1.32.73,1.26,1.85,2.09,2.45,3.45.06.14.13.27.19.4.13.3.24.59.33.9l-.2.09c-1.65-2.69-2.93-5.82-6.24-6.69-6.49-1.72-13.48,1.27-20.02-.45-.5-.45-1-.86-1.42-1.39,1.84-3.08,2.94-6.74,4.2-10.08Z"/>
<path class="cls-22" d="M306.92,341.95c2.81,11.6,4.31,28.41,4.54,40.5.11,5.73-.3,11.57.03,17.28.23,3.91,2.14,7.51,2.29,11.41-2.68-1.78-5.03-5.44-6.68-8.14-1.41-2.31-3.42-5.61-3.62-8.36-.2-2.71.57-5.85.88-8.56.56-4.95.99-9.92,1.3-14.89.35-6.43.38-12.89.58-19.32.1-3.25-.08-6.74.68-9.91Z"/>
<path class="cls-22" d="M375.84,449.17c5.18,1.63,10.93,2.59,16.33,3.22,2.73.32,5.66.37,8.32,1.01,4.27,1.03,7.77,4.49,11.96,5.98,15.15,5.35,38.57,5.37,52.96-2.14,2.35-1.23,4.57-2.84,7.11-3.65,2.17-.69,4.58-.87,6.83-1.16,5.27-.69,13.21-1.33,18.09-3.3,2.26,5.27,4.68,10.53,6.61,15.93,7.76,21.81,14.39,53.31,5.43,75.46-5.5,13.6-15.95,23.21-29.37,28.83-25.06,10.49-61.57,10.1-86.61-.28-8.94-3.71-18.4-11.65-23.52-19.87-.86-1.33-1.69-2.68-2.48-4.06-.97-1.64-1.84-3.33-2.6-5.08-7.02-16.15-4.83-35.42-1.68-52.23,1.63-8.68,3.76-17.59,6.99-25.82,1.51-4.41,3.63-8.63,5.64-12.83Z"/>
<path class="cls-28" d="M424.5,473.26c5.1.02,10.19.1,15.28.24,12.08,1.49,35.24,7.67,44.69,15.14,1.9,12.01,1.8,23.01-3.15,34.33-1.2,2.74-2.54,5.51-4.31,7.94-7.76,10.65-27.58,18.79-40.4,20.71-6.5.97-13.39.76-19.95.55-2.87-.1-5.82-.49-8.68-.21-.7-.14-1.4-.29-2.1-.45-10.15-2.3-17.01-6.84-22.54-15.6-.87-1.77-1.67-3.55-2.33-5.41-4.8-13.49-3.53-29.39,2.55-42.24,2.42-4.41,5.42-5.68,9.8-7.52,9.09-4.23,21.17-6.82,31.13-7.47Z"/>
<path class="cls-48" d="M383.57,488.26c2.42-4.41,5.42-5.68,9.8-7.52.1.03.21.07.31.1,1.48.46,2.69.33,4.2.38,3.45.07,6.58,2.04,8.15,5.11,1.06,2.06,1.13,4.33.41,6.52-1.18,3.55-3.98,6.55-7.34,8.15-2.89,1.38-6.19,1.61-9.22.51-2.35-.86-4.73-2.8-5.74-5.13-1.15-2.64.18-5.48-.58-8.12Z"/>
<path class="cls-19" d="M375.84,449.17c5.18,1.63,10.93,2.59,16.33,3.22,2.73.32,5.66.37,8.32,1.01,4.27,1.03,7.77,4.49,11.96,5.98,15.15,5.35,38.57,5.37,52.96-2.14,2.35-1.23,4.57-2.84,7.11-3.65,2.17-.69,4.58-.87,6.83-1.16,5.27-.69,13.21-1.33,18.09-3.3,2.26,5.27,4.68,10.53,6.61,15.93,7.76,21.81,14.39,53.31,5.43,75.46-5.5,13.6-15.95,23.21-29.37,28.83-25.06,10.49-61.57,10.1-86.61-.28-8.94-3.71-18.4-11.65-23.52-19.87-.86-1.33-1.69-2.68-2.48-4.06l.44-.56c2.01-.64,4.73-1.75,6.83-1.35,2.48-1.64,6.68-2.17,7.57-2.78.09-.07.18-.14.28-.2l.99.44c.32.43.64.83.89,1.3,13.41,13.14,34.98,16.01,52.91,15.85,15.78-.14,34.4-2.44,47.46-12.04.46-.82,2.34-1.93,3.12-2.59,4.91-4.12,7.66-9.15,9.24-15.29,3.48-13.58,1.74-32.02-5.51-44.16-2.71-4.55-18.8-9.48-24.32-10.86-5.08-1.27-10.04-1.77-15.23-2.33-3.14-.34-6.25-.9-9.39-1.14-7.5-.6-15.46-.24-22.88.91-1.73.27-4.29.42-5.76,1.3l.15.3c-1.6.08-3.53-.36-5.13-.58-3.11-.67-6.29-1.06-9.42-1.63-9.91-1.8-20.21-3.84-29.53-7.71,1.51-4.41,3.63-8.63,5.64-12.83Z"/>
<path class="cls-8" d="M398.94,553.57c-4.39-2.76-11.93-5.31-14.37-10.23-.33-.66-.32-.71-.08-1.36,13.41,13.14,34.98,16.01,52.91,15.85,15.78-.14,34.4-2.44,47.46-12.04l.62.48c-2.49,4.59-12.69,8.14-17.3,9.5-14.99,4.4-39.17,5.14-54.52,2.05-3.18-.64-6.37-1.49-9.47-2.47-1.57-.49-3.71-1.61-5.27-1.77Z"/>
<path class="cls-33" d="M374.77,543.22c2.48-1.64,6.68-2.17,7.57-2.78.09-.07.18-.14.28-.2l.99.44c.32.43.64.83.89,1.3-.24.66-.25.7.08,1.36,2.44,4.92,9.97,7.47,14.37,10.23-2.55.01-8.13-3.77-10.16-5.32-.79-.6-3.11-3.09-3.9-3.24-3.42-.65-7.32,1.64-10.63,2.32-1.37.28-3.28-.33-4.41.43.4.58,3.3,1.84,4.49,3.06l-.02.28c-1.06-.3-1.38-1.28-2.27-1.82-.73-.45-1.26-.24-2.05-.1-.86-1.33-1.69-2.68-2.48-4.06l.44-.56c2.01-.64,4.73-1.75,6.83-1.35Z"/>
<path class="cls-29" d="M370.2,462c9.33,3.88,19.62,5.92,29.53,7.71,3.13.57,6.31.96,9.42,1.63l-.37.14c-1.27.48-2.65.74-3.95,1.17-5.95,1.95-17.32,5.54-21.8,9.8-1.13,1.07-1.98,2.44-2.64,3.85-1.03,2.2-1.68,4.56-2.35,6.88-3.48,12.01-4.29,25.5.13,37.36,1.03,2.76,2.27,5.9,4.14,8.2l1.29,1.94-.99-.44c-.09.07-.18.14-.28.2-.9.61-5.1,1.14-7.57,2.78-2.1-.4-4.82.71-6.83,1.35l-.44.56c-.97-1.64-1.84-3.33-2.6-5.08-7.02-16.15-4.83-35.42-1.68-52.23,1.63-8.68,3.76-17.59,6.99-25.82Z"/>
<path class="cls-48" d="M377.21,469.06c1.03-.15,2.02,0,3.05.09.74,3.82,1.12,7.6-.1,11.36l-2.01,1.62c-.95.99-2.63,1.54-3.87,2.12-.77-.44-1.55-.87-2.29-1.35-1.47-.95-2.59-2.38-2.94-4.12-.39-1.96.27-4.03,1.35-5.66,1.76-2.66,3.83-3.49,6.8-4.05Z"/>
<path class="cls-43" d="M377.21,469.06c1.03-.15,2.02,0,3.05.09.74,3.82,1.12,7.6-.1,11.36l-2.01,1.62c.66-.78.87-1.45,1.09-2.44l.1-.47c.96-4.43-1.13-5.16-1.41-8.51-.01-.12,0-.25,0-.38-.06-.8-.11-.78-.71-1.27Z"/>
<path class="cls-48" d="M368.92,492.73c-.49-.39-1.04-.78-1.41-1.29-.78-1.08-1.07-2.72-.88-4.02.18-1.25.75-2.53,1.83-3.24.64-.42,1.37-.55,2.11-.34.98.28,1.38.95,1.84,1.77.18.33.3.84.68.94.37.11.71.09,1.1.08.82-.02,1.21,0,1.94.37.44.64.58,1.05.41,1.82-.36,1.64-1.77,3.4-3.21,4.22-.4.23-.81.42-1.22.62-1.05-.32-2.1-.67-3.17-.93Z"/>
<path class="cls-43" d="M372.41,485.61c.18.33.3.84.68.94.37.11.71.09,1.1.08.82-.02,1.21,0,1.94.37.44.64.58,1.05.41,1.82-.36,1.64-1.77,3.4-3.21,4.22-.4.23-.81.42-1.22.62-1.05-.32-2.1-.67-3.17-.93.88-.3,1.84-1.19,2.62-1.75.76-1.79.88-3.47.86-5.38Z"/>
<path class="cls-24" d="M372.41,485.61c.18.33.3.84.68.94.37.11.71.09,1.1.08-1.48,1.46-.56,4.26-2.11,4.62l-.53-.27c.76-1.79.88-3.47.86-5.38Z"/>
<path class="cls-43" d="M385.34,469.66c.16.02.32.04.48.06,1.6.21,2.17.99,3.09,2.24.11,1.42.31,3.47-.25,4.78-.3.7-.55.8-1.24,1.08-1.1-.02-2.26.02-3.11-.79-.69-.66-1.05-1.71-1.05-2.65,0-1.66.91-3.58,2.07-4.72Z"/>
<path class="cls-33" d="M439.78,473.5c5.22.08,10.34-.18,15.54.48,6.22.8,28.82,7.07,33.15,11.52,5.85,6,8.21,23.04,7.88,31.12-.38,9.42-3.43,19.98-10.64,26.53-3.12,2.84-7.22,4.68-11.1,6.23-14.36,5.71-29.92,7.39-45.27,6.56-7.09-.39-14.91-.76-21.35-3.99,2.86-.28,5.81.12,8.68.21,6.56.21,13.44.42,19.95-.55,12.82-1.91,32.64-10.06,40.4-20.71,1.77-2.43,3.11-5.2,4.31-7.94,4.95-11.32,5.05-22.32,3.15-34.33-9.45-7.47-32.61-13.65-44.69-15.14Z"/>
<path class="cls-33" d="M409.16,471.35c1.6.22,3.53.66,5.13.58,2.23.39,4.52,1.03,6.76,1.26,1.15.12,2.31,0,3.46.08-9.96.65-22.04,3.24-31.13,7.47-4.38,1.84-7.38,3.12-9.8,7.52-6.08,12.85-7.35,28.75-2.55,42.24.66,1.86,1.46,3.64,2.33,5.41-.11-.07-.22-.13-.33-.2-2.98-2.05-4.73-13.6-5.12-16.98-.68-5.94-.12-17.38,2.03-22.88.41-1.05,2.06-4.1,1.42-4.96-.67.13-1.08.43-1.63.81-.11-.12-.22-.25-.33-.38-.08-.08-.16-.15-.24-.23-.75,1.38-.92,3.19-1.3,4.72-2.58,10.28-3.28,21.35-.28,31.64.98,3.37,4.28,8.83,4.75,11.29-1.87-2.3-3.11-5.45-4.14-8.2-4.43-11.86-3.61-25.35-.13-37.36.67-2.32,1.33-4.68,2.35-6.88.66-1.41,1.51-2.77,2.64-3.85,4.48-4.26,15.85-7.85,21.8-9.8,1.3-.43,2.68-.68,3.95-1.17l.37-.14Z"/>
<path class="cls-5" d="M479.28,606.16c2.47-1.17,4.81-2.61,7.26-3.82,5.2-2.57,11.43-4.53,17.24-4.93,7.36-.51,18.75,1.68,24.43,6.63,6.45,5.1,10.33,10.77,11.29,19.09.52,4.48-.36,13.37-3.16,16.9-.86,1.09-2.14,1.83-3.42,2.35-6.23,4.01-16.88,6.14-24.22,6.37-15.8.49-34.67-3.22-46.51-14.43-4.81-4.55-7.1-6.9-7.26-13.83-.16-6.71,1.42-14.36,6.18-19.37,6.18,4.8,10.83,4.32,18.16,5.05Z"/>
<path class="cls-10" d="M528.22,604.04c6.45,5.1,10.33,10.77,11.29,19.09.52,4.48-.36,13.37-3.16,16.9-.86,1.09-2.14,1.83-3.42,2.35-.11-.32-.15-.39-.13-.78.05-.99,3.05-9.98,3.58-12.21,2.68-11.32-2.65-15.11-7.92-23.95-.4-.68-.43-.68-.24-1.41Z"/>
<path class="cls-31" d="M513.1,605.24c3.76-.54,7.93-.54,11.11,1.93,3.3,2.56,4.64,7.61,5.02,11.59.52,5.43-.05,12.45-3.7,16.79-2.42,2.87-6.23,5.33-9.99,5.75-1.2.14-2.49.03-3.69-.03-6.98,1.98-19.27.65-26.07-1.6-6.76-2.24-13.73-6.59-16.93-13.23-1.22-2.54-1.21-5.42-.32-8.05.68-2.31,1.95-4.08,3.77-5.63,1.02-.88,2.16-1.6,3.39-2.14,3-1.33,11.15-3.11,14.36-2.83l3.81-1.27c2.41-.66,4.7-1,7.19-1.07,3.74-.76,8.21-.38,12.05-.2Z"/>
<path class="cls-24" d="M490.06,607.78l3.81-1.27c3.03,1.76,5.17,3.53,6.13,7.08.73,2.68.48,5.3-.93,7.7-1.48,2.51-4.01,4.7-6.89,5.4-1.68.41-3.41.19-4.86-.77-1.72-1.15-3-3.3-3.37-5.33-.6-3.29.86-6.71,2.77-9.33,1-1.37,2.22-2.26,3.35-3.48Z"/>
<path class="cls-48" d="M491.28,611.52c.96,0,1.88-.01,2.65.64,1.46,1.24,1.33,3.74,1.44,5.48-.33.7-.67,1.4-1.08,2.05-1.24,1.93-2.57,2.67-4.77,3.16-2.26-.65-3.15-1.7-4.4-3.59.42-1.46.99-3.06,1.72-4.4,1.06-1.95,2.37-2.72,4.43-3.34Z"/>
<path class="cls-21" d="M493.86,606.51c2.41-.66,4.7-1,7.19-1.07.93.1,1.73.04,2.51.58,1.21,2.32.7,6.87-.12,9.32-1.18,3.52-6.09,9.71-9.38,11.22-1.75.8-3.77,1.08-5.58.31-3.27-1.38-3.13-4.6-5.97-3.92-.46-.31-.95-.62-1.17-1.15.03-.61,0-1.24-.18-1.82-.28-.93-.84-1.76-1.71-2.21-1.71-.89-3.56-.51-5.3.04.21-.49.13-.45.62-.77l-.16-.48c-.98.08-1.51.52-2.5.28-.47-.68-.53-1.12-.38-1.94.05-.28.12-.55.19-.83l-.25-.08.21.27-.02.08c-.83.12-1.04.67-1.51,1.32-.64.88-1.11,1.95-1.83,2.74.68-2.31,1.95-4.08,3.77-5.63,1.02-.88,2.16-1.6,3.39-2.14,3-1.33,11.15-3.11,14.36-2.83-1.12,1.22-2.34,2.11-3.35,3.48-1.91,2.62-3.37,6.04-2.77,9.33.37,2.02,1.65,4.18,3.37,5.33,1.45.97,3.18,1.18,4.86.77,2.88-.7,5.41-2.89,6.89-5.4,1.42-2.4,1.66-5.02.93-7.7-.96-3.55-3.1-5.32-6.13-7.08Z"/>
<path class="cls-10" d="M513.1,605.24c3.76-.54,7.93-.54,11.11,1.93,3.3,2.56,4.64,7.61,5.02,11.59.52,5.43-.05,12.45-3.7,16.79-2.42,2.87-6.23,5.33-9.99,5.75-1.2.14-2.49.03-3.69-.03,1.28-.48,2.64-.97,3.83-1.65,4.46-2.51,8.08-7.73,9.4-12.61,1.16-4.3,1.37-11.43-.99-15.3-1.8-2.96-7.7-5.73-10.99-6.46Z"/>
<path class="cls-30" d="M474.16,617.8c1.74-.55,3.59-.93,5.3-.04.87.46,1.43,1.28,1.71,2.21.17.58.21,1.21.18,1.82-.08.22-.15.44-.24.67-.66,1.73-1.97,3.03-3.69,3.73-1.06.43-2.33.56-3.39.06-1.65-.79-2.23-2.26-2.8-3.87.62-2.15,1.2-3.14,2.93-4.58Z"/>
<path class="cls-6" d="M365.98,598.13c1.46-.82,11.59-.35,13.53.2,3.09.86,6.06,2.51,8.94,3.89,2.85,1.38,5.74,2.65,8.68,3.82,6.75.24,13.65-.55,18.98-5.05,5.22,6.82,7.54,13.97,6.44,22.58-.69,5.36-4.89,9.73-9.04,12.89-13.38,10.15-33.92,14.08-50.4,11.71-7.88-1.13-16.41-3.54-22.49-8.91-1.54-4.85-3.4-11.53-2.24-16.6.88-5.2,2.76-9.39,6.11-13.47,3.42-3.85,7.33-6.49,12.07-8.49l.34-.39c3.03-1.07,5.89-1.91,9.09-2.18Z"/>
<path class="cls-2" d="M365.98,598.13l4.08.1c4.51,1.09,11.98,5,14.46,8.95,2.36,3.76,2.79,9.64,1.73,13.91-1.38,5.53-5.34,9.68-10.16,12.5-7.12,4.15-16.09,5.55-24.06,3.34-5.02-1.39-9.36-4.24-11.91-8.89-.9-1.64-1.75-3.48-1.75-5.38.88-5.2,2.76-9.39,6.11-13.47,3.42-3.85,7.33-6.49,12.07-8.49l.34-.39c3.03-1.07,5.89-1.91,9.09-2.18Z"/>
<path class="cls-48" d="M344.48,609.18c3.42-3.85,7.33-6.49,12.07-8.49.66.36,1.3.67,2,.93.4.15.79.23,1,.64,1.12,2.16.41,5.63-.48,7.74-1.31,3.14-5.09,7.34-8.34,8.56-.25.09-.36.11-.63.17-1.49.1-2.95-.05-4.28-.79-3.34-1.86-.54-6.37-1.17-8.32-.05-.15-.11-.3-.17-.46Z"/>
<path class="cls-24" d="M356.55,600.69l.34-.39c2.01.5,4.34,1.53,5.49,3.33,1.24,1.94,1.28,4.69.73,6.87-.75,2.96-2.96,5.1-5.55,6.56-2.54,1.43-4.61,1.67-7.45,1.68.27-.07.39-.08.63-.17,3.24-1.22,7.03-5.43,8.34-8.56.88-2.12,1.6-5.58.48-7.74-.21-.41-.6-.49-1-.64-.7-.26-1.34-.58-2-.93Z"/>
<path class="cls-4" d="M365.98,598.13c1.46-.82,11.59-.35,13.53.2,3.09.86,6.06,2.51,8.94,3.89,2.85,1.38,5.74,2.65,8.68,3.82-2.61.29-9.34-3.18-12.02-4.16-3.69-1.35-7.75-2.92-11.64-3.57-1.1-.18-2.3-.1-3.41-.08l-4.08-.1Z"/>
<path class="cls-30" d="M400.38,617.24c.86-.08,1.63.07,2.45.37,1.31.47,2.33,1.48,2.89,2.74.54,1.21.58,2.64.04,3.85-.56,1.27-1.73,2.07-3,2.51-1.04-.04-2-.13-2.97-.53-1.38-.57-2.55-1.71-3.03-3.13-.4-1.12-.32-2.35.21-3.41.74-1.47,1.96-1.89,3.42-2.4Z"/>
<path class="cls-23" d="M556.08,512.85c1.69-1.09,3.53-1.97,5.31-2.9,7.78,7.43,12.65,17.34,12.93,28.2.2,7.51-2.49,13.66-7.63,19.08-3.89,4.1-10.01,8.04-15.86,8.05-1.07,0-1.79-.21-2.62-.87-1.14-2.06-.55-5.84,0-8.11.02-.09.06-.17.09-.26.47-4.2,1.21-10.75-.38-14.74-.43-1.08-1.15-2.1-2.27-2.51-.8-.3-1.68-.29-2.46.07-2.66,1.24-3.71,5.78-4.6,8.37-.18.62-.42,1.28-.49,1.92-.07.23-.14.46-.21.68-.63,2-1.38,3.79-3.41,4.75-1.21.57-2.64.57-3.88.1-2.48-.93-3.88-3.22-4.86-5.55-1.27-3.05-1.81-6.67-1.39-9.95.29-2.5.73-4.89,1.43-7.31.49-1.46,1.06-2.87,1.64-4.3.85-1.65,1.5-3.44,2.2-5.15.88-.19,1.8-.27,2.69-.4,1.9-.47,3.8-.93,5.67-1.52l.58-.39c2.24.05,9.61-3.17,11.9-4.23,1.92-.92,3.78-2.01,5.64-3.03Z"/>
<path class="cls-22" d="M556.08,512.85c1.69-1.09,3.53-1.97,5.31-2.9,7.78,7.43,12.65,17.34,12.93,28.2.2,7.51-2.49,13.66-7.63,19.08-3.89,4.1-10.01,8.04-15.86,8.05-1.07,0-1.79-.21-2.62-.87-1.14-2.06-.55-5.84,0-8.11.02-.09.06-.17.09-.26.28.18.28.22.62.29,2.2.48,5.48-1.29,7.33-2.46,3.17-2.01,5.76-4.97,6.5-8.74,1.48-7.48-1.73-17.77-5.77-24.05l.39-.2c.35-.77-.83-5.02-.85-6.33-.01-.73-.05-1.07-.43-1.71Z"/>
<path class="cls-48" d="M532.29,522.03c1.9-.47,3.8-.93,5.67-1.52.59,1.08-.14,3.86-.5,5.12-.36,1.27-.82,2.55-1.41,3.74-.38.76-1.12,1.74-1.34,2.53-.66,1.63-1.37,2.4-2.74,3.46l-.29.22c-.09.06-.17.12-.26.17-1.02.56-2.24.02-3.27-.28-.94-1.12-1.94-2.16-2.37-3.59.49-1.46,1.06-2.87,1.64-4.3.85-1.65,1.5-3.44,2.2-5.15.88-.19,1.8-.27,2.69-.4Z"/>
<path class="cls-21" d="M525.76,531.88c.49-1.46,1.06-2.87,1.64-4.3.3.47.67.96.91,1.46-.19,1.32.08,2.35.45,3.6-.18.74-.37,1.34-.19,2.1.69.76,1.27.75,2.27.8.28.01.55.02.83.03-.09.06-.17.12-.26.17-1.02.56-2.24.02-3.27-.28-.94-1.12-1.94-2.16-2.37-3.59Z"/>
<path class="cls-24" d="M534.7,531.89c-.66,1.63-1.37,2.4-2.74,3.46l-.29.22c-.27,0-.55-.02-.83-.03-1-.05-1.58-.04-2.27-.8-.17-.76.01-1.36.19-2.1.15.13.23.23.42.33,1.35.7,4.11-.66,5.52-1.08Z"/>
<path class="cls-43" d="M532.29,522.03c-.41.72-.83,1.41-1.31,2.09-1.07,1.54-1.72,3.08-2.51,4.73-.04.07-.11.12-.16.19-.23-.5-.61-.99-.91-1.46.85-1.65,1.5-3.44,2.2-5.15.88-.19,1.8-.27,2.69-.4Z"/>
<path class="cls-12" d="M524.33,539.18c.12.1.24.2.35.3.41.36.64.74.92,1.21,1.59,2.67,5.24,5.93,8.32,6.63,1.55.35,3.15.39,4.66-.1-.18.62-.42,1.28-.49,1.92-.07.23-.14.46-.21.68-.63,2-1.38,3.79-3.41,4.75-1.21.57-2.64.57-3.88.1-2.48-.93-3.88-3.22-4.86-5.55-1.27-3.05-1.81-6.67-1.39-9.95Z"/>
<path class="cls-22" d="M525.73,549.13c2.78-.01,5.51,1.43,8.33,1.68,1.32-.59,2.64-1.23,4.03-1.66-.07.23-.14.46-.21.68-.63,2-1.38,3.79-3.41,4.75-1.21.57-2.64.57-3.88.1-2.48-.93-3.88-3.22-4.86-5.55Z"/>
<path class="cls-21" d="M537.96,520.51l.58-.39c1.88,1.29,2.91,5.13,3.28,7.32.1.59.14,1.04,0,1.62-1.37,1.78-3.59,1.66-5.33,2.81-1.67,1.1-2.59,2.76-4.54,3.49,1.37-1.06,2.09-1.83,2.74-3.46.22-.79.96-1.76,1.34-2.53.59-1.19,1.05-2.47,1.41-3.74.36-1.26,1.09-4.04.5-5.12Z"/>
<path class="cls-10" d="M556.08,512.85c.38.63.41.97.43,1.71.02,1.31,1.2,5.56.85,6.33l-.39.2c-.93-1.34-1.73-3.02-2.96-4.1-.08-.07-.16-.13-.24-.2-.9-.75-2.21-.76-3.34-.91,1.92-.92,3.78-2.01,5.64-3.03Z"/>
<path class="cls-1" d="M311.45,511.68c.61-.4.91-.72,1.7-.64,1.74.18,4.43,2.19,6,3.08,5.49,2.39,10.88,4.71,16.59,6.54.83.14,1.63.31,2.48.23,2.16.4,4.34.76,6.48,1.29,4.42,6.13,6.57,15.5,5.41,22.96-.47,3.05-1.71,6.7-4.31,8.55-1.56,1.11-3.6,1.44-5.46,1.05-1.16-.24-2.18-1.18-2.79-2.16-.51-.82-.94-1.71-1.2-2.64-1.63-3.83-2.06-7.51-4.73-10.92-1.1-.43-2.18-.72-3.33-.29-.43.16-.75.45-1.09.74-2.86,4.96-1.38,12.16-.52,17.5.29,1.8.75,3.82.4,5.63-.18.89-.61,1.52-1.36,2.01-1.38.89-3.17.73-4.7.42-6.5-1.32-12.86-6.2-16.44-11.68-3.8-5.82-4.9-13.21-3.46-19.95.37-3.21,1.28-6.2,2.44-9.19,1.49-4.59,4.73-8.96,7.9-12.52Z"/>
<path class="cls-42" d="M335.74,520.65c.83.14,1.63.31,2.48.23,2.16.4,4.34.76,6.48,1.29,4.42,6.13,6.57,15.5,5.41,22.96-.47,3.05-1.71,6.7-4.31,8.55-1.56,1.11-3.6,1.44-5.46,1.05-1.16-.24-2.18-1.18-2.79-2.16-.51-.82-.94-1.71-1.2-2.64-1.63-3.83-2.06-7.51-4.73-10.92,1.2-.68,2.9-.41,4.19-.06.46.12.84.31,1.26.53.74.37.62.72,1.12,1.15.4.35.48.23.93.17.8-.86.85-2.11,1.48-3.14.04-.07.09-.14.13-.22.59-2.17.34-5.23.02-7.48-.59-4.08-1.64-6.82-5.01-9.33Z"/>
<path class="cls-10" d="M335.74,520.65c.83.14,1.63.31,2.48.23l-.4.53c.27.34.48.55.82.82.57.45.86,1.09,1.23,1.7.29.48.16.31.63.68l.28-.23c2.45,5.61,3.59,11.1,1.27,16.98-1.24,3.14-3.33,6.18-5.69,8.58-1.63-3.83-2.06-7.51-4.73-10.92,1.2-.68,2.9-.41,4.19-.06.46.12.84.31,1.26.53.74.37.62.72,1.12,1.15.4.35.48.23.93.17.8-.86.85-2.11,1.48-3.14.04-.07.09-.14.13-.22.59-2.17.34-5.23.02-7.48-.59-4.08-1.64-6.82-5.01-9.33Z"/>
<path class="cls-12" d="M337.07,539.49c.74.37.62.72,1.12,1.15.4.35.48.23.93.17.8-.86.85-2.11,1.48-3.14.04-.07.09-.14.13-.22-.38,2.09-1.02,3.92-1.79,5.89-.6-1.3-1.23-2.58-1.87-3.86Z"/>
<path class="cls-10" d="M327.21,539.48c-2.86,4.96-1.38,12.16-.52,17.5.29,1.8.75,3.82.4,5.63-.18.89-.61,1.52-1.36,2.01-1.38.89-3.17.73-4.7.42-6.5-1.32-12.86-6.2-16.44-11.68-3.8-5.82-4.9-13.21-3.46-19.95-.26,5.42,5.34,15.41,8.93,19.34,2.67,2.91,6.56,3.76,10.37,3.9,1.37.05,2.74-.09,4.1-.24-.7-4.61-1.96-12.84.94-16.92.49-.26.75-.48,1.32-.25.16.06.29.17.44.25Z"/>
<path class="cls-48" d="M310.32,517.55c1.25-.34,2.77-.93,4.02-.47,1.4.84,2.71,1.48,3.15,3.18.58,2.25-1.1,4.97-2.28,6.81-.05.07-.09.14-.14.21-1.05,1.15-2.27,2.43-3.59,3.26-.29-.03-.57-.07-.86-.11-1.08-.12-1.93-.4-2.94-.8-.46-.18-.9-.34-1.28-.67-.71-.63-.91-1.53-.86-2.44.17-2.9,2.68-7.01,4.78-8.96Z"/>
<path class="cls-24" d="M311.45,511.68c.61-.4.91-.72,1.7-.64,1.74.18,4.43,2.19,6,3.08l-1.18.87c-1.01-.17-2.48-.5-3.38.06-.52.92-.21,1.08-.24,2.04-1.25-.46-2.78.13-4.02.47-2.1,1.96-4.61,6.06-4.78,8.96-.05.91.15,1.81.86,2.44.38.34.82.49,1.28.67-.49.46-.58.57-1.29.58-.29,0-.67-.09-.95-.14-.57.5-.5.88-.63,1.62-.62-1.56-1.37-4.55-1.18-6.24.05-.49.03-.77-.08-1.24,1.49-4.59,4.73-8.96,7.9-12.52Z"/>
<path class="cls-21" d="M311.45,511.68c.61-.4.91-.72,1.7-.64,1.74.18,4.43,2.19,6,3.08l-1.18.87c-1.75-1.01-3.99.03-5.96-.79l-.11-.36c.48-.51,1.07-.97,1.23-1.68-.57-.45-.97-.4-1.68-.48Z"/>
<path class="cls-43" d="M307.69,529.63c1.01.41,1.86.69,2.94.8.29.03.57.07.86.11-.83.09-1.6.2-2.4.45-.14,1.04.94,1.16.38,3.05-.25.25-.54.45-.82.67-.47,0-.86-.03-1.29-.23-1.18-.56-2.1-1.56-2.54-2.8.13-.73.06-1.12.63-1.62.28.05.66.15.95.14.71,0,.79-.12,1.29-.58Z"/>
<path class="cls-24" d="M315.08,527.28c-.35,1.51-.79,3.01-.77,4.56,0,.31,0,.61,0,.92-1.36.22-2.6.44-3.9.93l-.95.35c.57-1.89-.52-2.02-.38-3.05.8-.25,1.56-.36,2.4-.45,1.32-.83,2.54-2.11,3.59-3.26Z"/>
<path class="cls-22" d="M521.77,490.68c-2.44-3.23-6.17-8.82-7.52-12.54-1.69-4.67-2.54-9.59-4.25-14.27-1.18-3.25-3.23-6.59-3.99-9.9.27-.67.76-.98,1.4-1.27.63-.29,1.32-.51,1.98-.72,17.71,5.45,32.81,23.17,41.28,39.18,1.35,2.57,2.69,5.21,3.57,7.98-3.98,1.7-7.5,4.11-11.61,5.61-4.35,1.91-8.99,3.07-13.74,3.42-2.46-5.79-4.52-11.74-7.13-17.47Z"/>
<path class="cls-21" d="M524.44,487.12c3.12-.03,5.78-.04,8.6,1.55,3.61,3.3,5.74,7.1,7.64,11.57.62,1.47,1.16,3.12,1.95,4.5-4.35,1.91-8.99,3.07-13.74,3.42-2.46-5.79-4.52-11.74-7.13-17.47.53-.33.75-.39.98-.98.47-1.21.64-1.75,1.69-2.59Z"/>
<path class="cls-10" d="M524.44,487.12c.92-1.4,2-2.83,3.73-3.23,1.35-.31,2.45.18,3.68.67.27.63.53,1.26.81,1.88.38.85.46,1.3.39,2.23-2.83-1.59-5.48-1.58-8.6-1.55Z"/>
<path class="cls-27" d="M353.16,457.87c2.47-2.05,9.12-5.91,12.47-5.33.71.12.99.34,1.43.89.28.84.21,1.39-.04,2.24-1.22,4.15-3.44,8.05-4.85,12.15-1.5,4.36-1.87,9.42-3.96,13.52-1.48,2.91-3.67,5.44-5.23,8.32-3.13,5.75-5.09,12.15-7.19,18.33-4.13-.36-7.95-1.05-11.91-2.31-3.11-1.39-6.41-2.1-9.27-4.07l-3.86-2.14c.43-2.04,1.25-3.74,2.15-5.61,1.03-2.81,2.67-5.58,4.14-8.19l1.59-2.4c.73-1.17,1.52-2.29,2.3-3.43,1.97-2.65,3.93-5.29,6.11-7.78l3.73-4.1,1.9-1.89c3.26-3,6.61-5.97,10.48-8.18Z"/>
<path class="cls-49" d="M353.16,457.87c2.47-2.05,9.12-5.91,12.47-5.33.71.12.99.34,1.43.89.28.84.21,1.39-.04,2.24-1.22,4.15-3.44,8.05-4.85,12.15-1.5,4.36-1.87,9.42-3.96,13.52-1.48,2.91-3.67,5.44-5.23,8.32-3.13,5.75-5.09,12.15-7.19,18.33-4.13-.36-7.95-1.05-11.91-2.31,3.13-7.83,7.05-15.33,11.71-22.36,1.65-2.5,3.65-4.68,5.2-7.27.96-1.6,1.58-3.33,2.48-4.96l.37.06.74,1.14.14-.28c-.11-.29-.29-.68-.35-1-.19-.99,1.03-2.46,1.58-3.26l.2.02c.06,2.74-1.25,4.73-1.56,7.3,1.71-3.11,1.53-6.45,2.81-9.64.89-2.22,2.79-4.29,3.25-6.64.16-.82.16-1.41-.31-2.12-.46-.35-.72-.46-1.27-.49-.42-.03-.79-.07-1.2-.17l-.43-.11c-1.28.8-2.57,1.76-4.08,2Z"/>
<path class="cls-48" d="M340.78,467.94l1.19.79c.76-.21,1.12-.14,1.86.05.61.56.77.94.8,1.78.07,2.74-1.9,5.98-3.88,7.82-.6.56-1.29,1.06-1.98,1.5-.79-.31-1.62-.57-2.32-1.06l-.21.55c.45.76,1.02,1.44,1.45,2.2-.9,1.74-1.2,2.99-3.06,3.88-1.35-.99-1.65-2.4-2.42-3.81l-.62.38c-.29-.73-.5-1.42-.66-2.18,1.97-2.65,3.93-5.29,6.11-7.78l3.73-4.1Z"/>
<path class="cls-8" d="M337.05,472.03l.02,2.04c-.69.88-.9,1.82-1.21,2.88-.37.43-.71.8-1.13,1.18-1,.9-1.81,2.34-2.51,3.49l-.62.38c-.29-.73-.5-1.42-.66-2.18,1.97-2.65,3.93-5.29,6.11-7.78Z"/>
<path class="cls-43" d="M340.78,467.94l1.19.79c-1.39,1.96-3.27,3.59-4.9,5.35l-.02-2.04,3.73-4.1Z"/>
<path class="cls-21" d="M328.64,483.24c.73-1.17,1.52-2.29,2.3-3.43.16.77.37,1.45.66,2.18l.62-.38c.77,1.41,1.07,2.82,2.42,3.81-.62.36-1.13.6-1.46,1.28l-.05.79c.3.73.46,1.01.15,1.76-.42,1.03-1.74,2.25-2.8,2.6-.26.09-.31.07-.54.07-1.06.78-2.33,3.27-2.52,4.55-.01.08-.01.16-.02.24-.05-.21-.06-.33-.19-.53-.92-1.42-2.79-1.85-4.29-2.35,1.03-2.81,2.67-5.58,4.14-8.19l1.59-2.4Z"/>
<path class="cls-24" d="M331.6,482l.62-.38c.77,1.41,1.07,2.82,2.42,3.81-.62.36-1.13.6-1.46,1.28l-.05.79c.3.73.46,1.01.15,1.76-.42,1.03-1.74,2.25-2.8,2.6-.26.09-.31.07-.54.07-.68-.93-1.29-1.59-1.27-2.79-.09-.48-.24-.95-.36-1.42.18-.91.57-1.68.96-2.51.4-.62.83-1.23,1.25-1.83.45-.28.78-.94,1.08-1.38Z"/>
<path class="cls-48" d="M330.52,483.37c1.06,1.16,2.29,2.51,2.51,4.14-.66.84-1.14,1.48-2.25,1.63-.71.1-1.41.06-2.12,0-.09-.48-.24-.95-.36-1.42.18-.91.57-1.68.96-2.51.4-.62.83-1.23,1.25-1.83Z"/>
<path class="cls-21" d="M342.68,466.05h.28c1.95-.01,5.06-.81,6.8-.04.05.82-.36.75-.57,1.41-.3.95.52,1.95.02,2.88-.86-.12-1.42-1.19-2.13-1.06-.07,1.18.88,1.72.62,2.69-.78.56-1.46.48-2.4.47,0,.09-.02.18-.03.27-.29,2.25-4.83,7.25-6.85,8.58-.3.2-.42.21-.73.3-.43-.76-1-1.44-1.45-2.2l.21-.55c.7.49,1.53.75,2.32,1.06.69-.45,1.37-.94,1.98-1.5,1.97-1.83,3.95-5.08,3.88-7.82-.02-.83-.19-1.22-.8-1.78-.74-.18-1.1-.26-1.86-.05l-1.19-.79,1.9-1.89Z"/>
<path class="cls-48" d="M322.91,493.84c1.5.51,3.37.94,4.29,2.35.13.2.14.32.19.53-.78,1.67-1.54,3.48-2.78,4.86l-3.86-2.14c.43-2.04,1.25-3.74,2.15-5.61Z"/>
<path class="cls-32" d="M283.59,316.64c2.12-1.89,4.47-3.12,7.14-4.06-2.1,10.86-3.23,21.88-3.39,32.94-.04,8.67-.04,17.4.92,26.03.72,2.96.75,6.3,1.12,9.34.32,2.66.97,5.52,1.04,8.18.14.97.23,1.94.33,2.92-3.07-.54-5.61-1.32-8.05-3.4-7.02-6.01-9.42-18.41-10.11-27.12-.02-2.07-.36-4.16-.45-6.24-.39-10.37.27-20.6,5.21-29.96,1.57-3.26,3.4-6.33,6.24-8.63Z"/>
<path class="cls-22" d="M272.59,361.47l.5-.27c1.28.77,1.91,2.86,2.26,4.26,1.04,2.65,2.86,4.83,5.5,6.01,1.77.79,5.04,1.57,6.84.57.22-.12.43-.28.57-.48.72,2.96.75,6.3,1.12,9.34.32,2.66.97,5.52,1.04,8.18.14.97.23,1.94.33,2.92-3.07-.54-5.61-1.32-8.05-3.4-7.02-6.01-9.42-18.41-10.11-27.12Z"/>
<path class="cls-10" d="M272.59,361.47l.5-.27c1.28.77,1.91,2.86,2.26,4.26l-.48.57c.16,1.44,4.36,13.4,5.12,14.96.72,1.46,1.84,3.49,3.17,4.46,1.89,1.38,4.68,2.5,6.91,3.17l.35.45c.14.97.23,1.94.33,2.92-3.07-.54-5.61-1.32-8.05-3.4-7.02-6.01-9.42-18.41-10.11-27.12Z"/>
<path class="cls-33" d="M272.14,355.23c.2-.5.46-.97.72-1.45l.4-.11,1.05.85c2.47.39,8.57,1.22,10.83.48.34-.11.59-.13.95-.11.81.74.72,1.64.88,2.69.73-3.41-.73-8.81.25-11.8.03-.08.07-.16.11-.25-.04,8.67-.04,17.4.92,26.03-.15.2-.36.36-.57.48-1.8,1-5.07.22-6.84-.57-2.64-1.18-4.46-3.35-5.5-6.01-.35-1.41-.97-3.49-2.26-4.26l-.5.27c-.02-2.07-.36-4.16-.45-6.24Z"/>
<path class="cls-48" d="M283.59,316.64c1.18.27,2.31.38,3.52.47-.83,5.49-1.59,10.83-3.19,16.17-.84.65-1.67,1.3-2.5,1.96-.98-.32-2.01-.59-2.96-.97-1.71-4.09-.2-5.4-1.1-9,1.57-3.26,3.4-6.33,6.24-8.63Z"/>
<path class="cls-48" d="M279.34,336.68c.89-.05,2.04-.23,2.76.42,1.27,1.16,1.08,3.58,1.17,5.16-1.02,2.32-2.28,3.15-4.49,4.19-.42.03-.79.05-1.2-.07-.53-.16-1.12-.79-1.39-1.25-.92-1.6-.81-4.02-.37-5.75.44-1.72.37-1.05,1.59-1.43.5-.15,1.43-.96,1.93-1.27Z"/>
<path class="cls-25" d="M580.92,312.86c8.12,3.91,12.26,9.3,15.22,17.75,4.92,14.01,4.63,36.69-1.82,50.04-2.12,4.38-5.17,8.88-9.97,10.54-1.03.36-2.76,1.03-3.79.59-.04-.27-.09-.48-.02-.74,3.51-18.39,4.6-37.15,3.23-55.82-.46-5.98-1.32-11.89-2.05-17.84-.29-1.5-.58-3-.8-4.51Z"/>
<path class="cls-10" d="M580.92,312.86c8.12,3.91,12.26,9.3,15.22,17.75,4.92,14.01,4.63,36.69-1.82,50.04-2.12,4.38-5.17,8.88-9.97,10.54-1.03.36-2.76,1.03-3.79.59-.04-.27-.09-.48-.02-.74,2-.92,5.96-2.6,7.32-4.28,1.68-2.07,2.76-4.61,3.85-7.02,1.66-3.68,3.12-7.44,3.98-11.4,1.7-7.87,1.3-17.83.38-25.86-.9-7.82-3.46-12.57-8.2-18.75-1.29-1.68-2.62-3.54-4.29-4.86-.98-.06-.23.44-.89.88-.44-.52-.32-.74-.28-1.4l.02-.31-.7-.66c-.29-1.5-.58-3-.8-4.51Z"/>
<path class="cls-22" d="M333.04,201.67c3.97-.65,7.84.35,11.1,2.69,1.18.85,2.32,1.88,3.19,3.05,2.35,2,3.23,5.96,3.46,8.93.32,4.23-.84,8.27-3.65,11.51-2.81,3.25-6.76,5.37-11.06,5.67-4.16.31-8.28-1.09-11.39-3.87-3.02-2.68-4.99-7.21-5.24-11.23-.03-.55-.05-1.07.09-1.61.26-1.62.44-3.07.99-4.63,1.19-3.35,2.73-5.5,5.63-7.61,1.98-1.61,4.42-2.41,6.89-2.89Z"/>
<path class="cls-21" d="M326.15,204.56c1.98-1.61,4.42-2.41,6.89-2.89,1.46.02,2.14-.03,3.2,1.05.09.09.17.18.25.26.45.46.94.86,1.44,1.27,1.54,3.99,1.96,9.39.22,13.42-1.14,2.64-3.74,4.51-6.39,5.45-2.52.89-4.68.8-7.22.14-.99-1.12-1.85-2.36-2.73-3.56-.58-1.19-1.71-1.62-2.28-2.9.26-1.62.44-3.07.99-4.63,1.19-3.35,2.73-5.5,5.63-7.61Z"/>
<path class="cls-48" d="M320.52,212.17c1.19-3.35,2.73-5.5,5.63-7.61,1.84.73,3.25,1.46,4.08,3.39.55,1.28.7,2.79.81,4.16-.98,2.1-2.49,4.02-4.78,4.78-.94.32-1.89.33-2.8-.12-2.17-1.07-1.89-2.85-2.95-4.61Z"/>
<path class="cls-36" d="M333.04,201.67c3.97-.65,7.84.35,11.1,2.69,1.18.85,2.32,1.88,3.19,3.05l-.45.14-.2-.19c-.62-.6-1.22-1.07-1.95-1.52l-.14.02,1.39,1.51c-.09.49,0,.31-.16.58-.96-1-1.93-1.84-3.04-2.67,1.62,4.49,1.72,8.8-.35,13.19-1.5,3.2-4.23,5.85-7.59,7.04-.86.31-1.74.53-2.63.7-2.61.8-5.55.26-8.21-.03l-1.7-2.09c-.28-1.46-.5-2.89-.47-4.38.89,1.2,1.74,2.45,2.73,3.56,2.53.66,4.7.75,7.22-.14,2.64-.94,5.25-2.81,6.39-5.45,1.74-4.03,1.31-9.44-.22-13.42-.49-.41-.99-.81-1.44-1.27-.08-.09-.17-.18-.25-.26-1.05-1.07-1.74-1.02-3.2-1.05Z"/>
<path class="cls-33" d="M321.82,219.71c.89,1.2,1.74,2.45,2.73,3.56.71,1.28,1.18,2.06,2.68,2.42,1.57.38,3.35.39,4.96.52-2.61.8-5.55.26-8.21-.03l-1.7-2.09c-.28-1.46-.5-2.89-.47-4.38Z"/>
<path class="cls-12" d="M345.81,207.94c.15-.26.07-.08.16-.58l-1.39-1.51.14-.02c.73.45,1.33.93,1.95,1.52l.2.19.45-.14c2.35,2,3.23,5.96,3.46,8.93.32,4.23-.84,8.27-3.65,11.51-2.81,3.25-6.76,5.37-11.06,5.67-4.16.31-8.28-1.09-11.39-3.87-3.02-2.68-4.99-7.21-5.24-11.23-.03-.55-.05-1.07.09-1.61.57,1.29,1.7,1.72,2.28,2.9-.02,1.49.19,2.92.47,4.38l1.7,2.09c1.65,2.63,4.4,4.28,7.3,5.28,3.43,1.19,6.72.8,9.92-.82,3.46-1.75,6.62-5.13,7.75-8.87,1.55-5.13-.74-9.45-3.15-13.82Z"/>
<path class="cls-18" d="M292,322.91c0-.15-.02-.3-.03-.45-.1-1.99,1.01-9.54,2.45-11.1.42-.46.96-.77,1.6-.77.66,0,1.2.36,1.6.85,3.46,4.29,3.5,40.6,3.22,48.3-.14,3.75-.56,7.48-.87,11.21-.27,3.28-.44,6.54-.93,9.79-.31,2.08-1.77,11.54-2.71,12.57-.65-.02-.71-.05-1.17-.55-2.93-3.12-4.19-12.27-4-16.37,0-.18.03-.36.06-.54-.03-2.02-.27-4.03-.29-6.06-.36-4.33-.98-9.03-.64-13.36-.61-4.28-.21-13.87.35-18.27-.11-5.05.66-10.27,1.36-15.26Z"/>
<path class="cls-14" d="M290.64,338.17l.15,1.93c.72-1.35.21-5.49.73-7.33.96,3.19-1.09,7.52.14,10.53.04,1.46.03,2.9-.02,4.36-.01.09-.03.18-.04.26-.32,2.47-.78,10.06-.32,12.34l-.43.23c-.41-1.31-.05-2.82-.57-4.06-.61-4.28-.21-13.87.35-18.27Z"/>
<path class="cls-40" d="M292,322.91c.6.6.56.94.57,1.77.04,3.11-.24,6.28-.39,9.38-.15,3.06-.17,6.2-.51,9.24-1.24-3.01.82-7.34-.14-10.53-.51,1.84,0,5.98-.73,7.33l-.15-1.93c-.11-5.05.66-10.27,1.36-15.26Z"/>
<path class="cls-26" d="M291.64,347.67c.13,7.41.1,14.83.26,22.25l-.98-.11c-.36-4.33-.98-9.03-.64-13.36.51,1.24.16,2.76.57,4.06l.43-.23c-.46-2.28,0-9.86.32-12.34.01-.09.02-.18.04-.26Z"/>
<path class="cls-45" d="M290.92,369.8l.98.11c.21,1.66.8,3.94,0,5.49l-.68.46c-.03-2.02-.27-4.03-.29-6.06Z"/>
<path class="cls-15" d="M581.14,359.63c.1.79.12,1.6.12,2.4,0,3.61-.13,7.44-.5,11.03-.3,2.96-2.78,18.3-4.56,19.83-.31.26-.25.16-.71.08-.25-.27-.26-.25-.48-.62-.85-1.45-1.12-3.96-1.47-5.62-1.81-8.57-2.11-16.9-2.28-25.63-.26-14.21.42-28.43,2.05-42.55.23-1.97.03-5.22.82-6.98.24-.54.48-.76,1.01-.99.59.09.84.26,1.22.72,2,2.4,3.82,11.25,3.55,14.37-.02.16-.04.33-.05.49-.01,5.13,1.06,10.35,1.29,15.49.27,6-.25,12.02-.02,17.99Z"/>
<path class="cls-45" d="M581.14,359.63c-.1.93-.11,1.96-.5,2.82-.7-3.93-.39-10.67-.54-14.91-.24-7-.88-14-1.06-20.99l.12.03c0,2.41.54,6.07.94,8.5.1-2.96-.9-6.03-.23-8.93-.01,5.13,1.06,10.35,1.29,15.49.27,6-.25,12.02-.02,17.99Z"/>
<path class="cls-22" d="M469.27,578.69c6.76-1.98,13.3-4.32,19.47-7.76,3.04-1.69,5.93-3.68,8.9-5.48,1.02,7.49.41,15.64.2,23.2-1.07.67-2.1,1.14-3.27,1.6-4.65,1.33-8.96,1.99-13.82,1.98-4.2.08-8.38-.65-12.3-2.17,1.13-3.64.7-7.59.81-11.36Z"/>
<path class="cls-10" d="M480.92,585.55c3.87-.17,7.48-1.55,11.14-2.71.61,2.81.29,5.23,2.52,7.41-4.65,1.33-8.96,1.99-13.82,1.98.18-2.2.12-4.46.16-6.67Z"/>
<path class="cls-22" d="M378.7,566.53c8.79,6.27,18.36,10.15,28.77,12.8-.08,3.66-.12,7.57.81,11.14-4.67,1.15-9.34,2.04-14.17,2.03-3.89-.02-10.69-.46-14.01-2.63-.77-.51-.64-1.04-.74-1.88-.95-2.59-.44-6.58-.51-9.36-.67-1.55-.14-9.85-.15-12.1Z"/>
<path class="cls-21" d="M378.85,578.62l.2-.51c1.08.08,2.59,1.37,3.51,1.95,3.6,1.7,7.69,3.22,11.04,5.36.19,2.34.24,4.73.51,7.06-3.89-.02-10.69-.46-14.01-2.63-.77-.51-.64-1.04-.74-1.88-.95-2.59-.44-6.58-.51-9.36Z"/>
<path class="cls-24" d="M378.85,578.62l.2-.51c1.08.08,2.59,1.37,3.51,1.95-1.2,2.23-.02,6.05-1.82,7.83-.47.06-.91.09-1.39.09-.95-2.59-.44-6.58-.51-9.36Z"/>
<path class="cls-15" d="M333.69,510.33c1.4.28,2.8.58,4.19.91,2.08.51,8.41,1.49,9.47,3.55.2.39.16.23,0,.69-1.56.73-5.24.02-6.91-.4-1.73-.44-3.54-.61-5.3-.96-7.32-1.46-12.45-2.61-19.12-6.15-.86-.46-2.7-1.2-3.26-1.99-.47-.67-.35-1.77-.07-2.49.31-.81.9-1.73,1.76-2.02.47-.15,1.17.1,1.58.36.07.05.14.1.21.15l5.75,3.34,5.71,2.58c1.99.8,3.98,1.71,6.01,2.42Z"/>
<path class="cls-40" d="M321.36,506.39c-1.41-.68-4.8-1.96-5.36-3.49-.14-.38.07-.58.22-.91l5.75,3.34-.61,1.06Z"/>
<path class="cls-14" d="M321.97,505.33l5.71,2.58c-.15.43-.28.87-.51,1.27-1.9-.8-4.16-1.56-5.82-2.79l.61-1.06Z"/>
<path class="cls-26" d="M327.69,507.91c1.99.8,3.98,1.71,6.01,2.42l-.56.3c-1.99.09-4.1-.8-5.95-1.45.23-.4.36-.83.51-1.27Z"/>
<path class="cls-15" d="M544.93,508.63c3.15-1.64,11.96-6.99,14.97-7.19.54.31.71.37.87,1.02.17.68-.11,1.71-.24,2.38-6.31,4.25-25.03,13.15-32.51,11.87-.71-.12-1.18-.31-1.68-.84-.15-.64-.13-.67.14-1.27.63-.52,1.37-.95,2.2-1,5.44-1.65,11.02-2.72,16.27-4.97Z"/>
<path class="cls-14" d="M544.93,508.63l.2.47c-1.44,2.09-9.54,4.21-12.12,4.68-1.34.25-3.12.52-4.34-.18,5.44-1.65,11.02-2.72,16.27-4.97Z"/>
<path class="cls-45" d="M338.38,641.86c3.65,1.98,7.47,3.98,11.38,5.39,11.13,4.02,23.43,4.01,35.02,2.56,2.61-.32,5.12-1,7.72-1.33l.08.15c-.68.17-1.33.36-1.99.6v.3c.94.27,1.75-.36,2.73-.23-1.21.93-3.82,1.39-5.36,1.62-9.04,1.38-15.01,1.79-24.26,1.21-2.62-.16-6.77-1.83-9.11-.73,1.59.38,3.43.83,5.06.87h.47s.18.21.18.21c-.31.14-.31.16-.7.21-1.01.14-2.58-.38-3.6-.59-5.63-1.18-12.05-2.7-16.87-5.99-.84-.58-1.81-1.27-2.01-2.33.18-.87.69-1.32,1.28-1.93Z"/>
<path class="cls-15" d="M503.31,589.77c.19-.02.42-.05.61-.03.6.08.76.21,1.13.64-.98,1.67-14.77,6.34-17.29,7-7.74,2.02-16.91,1.69-23.93-2.43-.41-.38-.86-.76-1.21-1.2-.38-.48-.49-.86-.44-1.46,1.07-.08,3.43,1.52,4.59,1.95,1.54.57,3.15.95,4.77,1.21,6.79,1.09,15.95.48,22.43-2.05,3-1.17,5.78-2.76,8.93-3.54l.42-.1Z"/>
<path class="cls-45" d="M390.12,597.84c-3.98-.31-14.93-1.71-17.94-4.23-.64-.53-1.08-1.25-1.01-2.11.06-.7.36-1.1.84-1.56.67-.21.75-.27,1.41-.06,3.46.81,6.56,2.83,10.01,3.46,3.01.77,6.4,1.35,9.26,2.56l-.59.95c-.66.32-1.32.65-1.98.98Z"/>
<path class="cls-26" d="M383.43,593.35c3.01.77,6.4,1.35,9.26,2.56l-.59.95c-2.86-.29-6.39-.99-9.09-1.99l.42-1.52Z"/>
<path class="cls-14" d="M373.42,589.89c3.46.81,6.56,2.83,10.01,3.46l-.42,1.52c-3.13-.91-7.15-2.4-9.66-4.5l.07-.48Z"/>
<path class="cls-15" d="M392.68,595.91c5.69.53,11.88.4,17.3-1.59.83-.3,3-1.45,3.76-1.43.2,0,.33.2.5.31.08.57.16.39-.11.79-1.73,2.56-7.67,3.74-10.55,4.11-3.46.45-10.23,1.05-13.49-.25.66-.34,1.32-.67,1.98-.98l.59-.95Z"/>
<path class="cls-40" d="M467.15,641.73l.81.24c2.83.8,5.34,2.55,8.08,3.62,5.68,2.21,11.67,3.63,17.65,4.73-.61.63-1.06.61-1.9.8-1.95-.55-4.11-.73-6.12-1.12-7.03-1.4-12.87-3.75-18.52-8.26Z"/>
<path class="cls-46" d="M493.69,650.32c5.06-.24,9.97.93,15.24.44,2.58-.24,5.53-.46,8.04-1.1,1.31-.33,2.66-1.22,4.04-1.12l.11.32c-.17,0-.34,0-.51,0-.74.04-1.12.39-1.7.8-5.68,4.01-20.39,2.66-27.12,1.45.85-.19,1.3-.16,1.9-.8Z"/>
<path class="cls-21" d="M319.27,651.45s-.09,0-.14.01c-11,.51-24.15-.08-32.54-8.16-4.99-4.81-6.93-10.86-7.49-17.59-.18-2.18-.18-4.46-.52-6.62-.44-2.8-1.94-5.54-1.92-8.4,0-1.13.33-2.28,1.17-3.07.84-.79,2.34-1.36,3.5-1.22,2.67.32,5.25,3.51,7.84,4.54,2.17.86,4.91,1.14,7.22,1.57,7.87,1.45,14.13,4.31,19.22,10.72,4.22,5.3,6.31,12.98,5.54,19.68,1.23,1.46,4.37,3.93,3.97,5.99-.3,1.52-2.02,2.66-3.21,3.47-.87-.34-1.75-.71-2.66-.92Z"/>
<path class="cls-4" d="M319.27,651.45s-.09,0-.14.01c-11,.51-24.15-.08-32.54-8.16-4.99-4.81-6.93-10.86-7.49-17.59-.18-2.18-.18-4.46-.52-6.62-.44-2.8-1.94-5.54-1.92-8.4,0-1.13.33-2.28,1.17-3.07.84-.79,2.34-1.36,3.5-1.22,2.67.32,5.25,3.51,7.84,4.54,2.17.86,4.91,1.14,7.22,1.57,7.87,1.45,14.13,4.31,19.22,10.72,4.22,5.3,6.31,12.98,5.54,19.68-.98-.42-1.67-.7-2.39-1.51-.75-.66-1.48-1.36-2.22-2.04-1.17-.86-2.37-1.69-3.43-2.68-2.04-1.39-4.15-2.69-6.23-4.03,1.03-2.68-2.88-6.39-2.18-9.04l.76-.34c-4.05-3.25-12.03-2.77-16.84-5.51-1.97-1.16-4.73-3.52-6.75-4.22-.36-.12-.75-.22-1.11-.35l.26,1.2c1.82,7.82.65,16.74,5.54,23.57,1.33,2.19,3.92,4.86,6.38,5.75,5.69,4.91,20.9,5.16,28.27,4.9-.45.47-.56.56-.7,1.18.26.48.53.77.92,1.15l.03.46c-.63-.35-.89-.6-1.63-.56l-.58.59Z"/>
<path class="cls-33" d="M304.3,618.03c5.79,2.74,10.2,7.33,12.36,13.39.82,2.29,2.48,7.6,2.12,9.98-.75-.66-1.48-1.36-2.22-2.04-1.17-.86-2.37-1.69-3.43-2.68-2.04-1.39-4.15-2.69-6.23-4.03,1.03-2.68-2.88-6.39-2.18-9.04l.76-.34c1.12.75,2.41,1.48,3.4,2.39.63-1.62-3.95-5.63-4.57-7.64Z"/>
<path class="cls-22" d="M313.12,636.69l.58-.31c.28-2.15-4.23-6.58-3.66-9.47,2.42,2.9,6.73,8.47,6.52,12.46-1.17-.86-2.37-1.69-3.43-2.68Z"/>
<path class="cls-24" d="M280.77,613.21c-.33-.96-.84-2.02-.68-3.04.55-.32.81-.28,1.39-.1,1.99.63,3.47,2.52,5.5,3.3,4.04,1.54,8.23,1.97,12.39,2.99,1.69.41,3.28,1.29,4.93,1.67.62,2.01,5.2,6.02,4.57,7.64-.99-.92-2.28-1.64-3.4-2.39-4.05-3.25-12.03-2.77-16.84-5.51-1.97-1.16-4.73-3.52-6.75-4.22-.36-.12-.75-.22-1.11-.35Z"/>
<path class="cls-12" d="M305.18,634.27c.64.31,1.31.59,1.89,1,3.11,1.83,13.12,9.97,14.14,13.36-7.37.26-22.58,0-28.27-4.9,3.56-.99,6.2-2.29,9.22-4.44l-.69-1c1.7-1.03,2.69-2.35,3.7-4.02Z"/>
<path class="cls-33" d="M305.18,634.27c.64.31,1.31.59,1.89,1-1.38,1.56-3.21,2.81-4.91,4.01l-.69-1c1.7-1.03,2.69-2.35,3.7-4.02Z"/>
<path class="cls-38" d="M290.95,620.8l.59-.14c5.15,3.75,9.63,9.21,15.35,12.01,2.08,1.33,4.18,2.64,6.23,4.03,1.07.99,2.26,1.82,3.43,2.68.74.68,1.47,1.37,2.22,2.04.72.8,1.41,1.09,2.39,1.51,1.23,1.46,4.37,3.93,3.97,5.99-.3,1.52-2.02,2.66-3.21,3.47-.87-.34-1.75-.71-2.66-.92l.58-.59c.74-.04.99.2,1.63.56l-.03-.46c-.39-.38-.66-.67-.92-1.15.14-.62.25-.71.7-1.18-1.02-3.39-11.03-11.52-14.14-13.36-.58-.41-1.25-.69-1.89-1l-.49-.44c-3.77-2.85-8.47-2.56-12.82-3.92l.46-.57c.91-.33,1.99-.03,2.96-.08l.22-.02c1.48-.08,3.14.43,4.59.73-3.39-2.71-6.51-5.71-9.14-9.17Z"/>
<path class="cls-24" d="M281.03,614.4l.51-.14c1.93,1.16,2.54,5.53,3.08,7.68,1.24,5.01,1.61,10.16,2.82,15.14-.25.62-.33.55-.86.89-4.89-6.83-3.72-15.75-5.54-23.57Z"/>
<path class="cls-30" d="M304.69,633.83l.49.44c-1.01,1.67-2,2.98-3.7,4.02-2.94.75-6.47.68-9.17-.86-.43-.25-1.34-.7-1.46-1.2l.43-.18c2.59,1.08,6.48,1.7,9.23,1.05,2.09-.49,3.07-1.48,4.17-3.26Z"/>
<path class="cls-30" d="M291.86,629.91c-.3-.05-.35-.05-.69-.15-1.03-.31-2.94-.95-3.42-1.92,1.49-.69,6.13,1.02,7.76,1.41l-.22.02c-.98.05-2.05-.24-2.96.08l-.46.57Z"/>
<g>
<path class="cls-9" d="M65.14,89.03l2.24-24.99-10.09-.91.57-6.31,27.19,2.44-.57,6.31-10.09-.91-2.24,24.99-7.01-.63Z"/>
<path class="cls-9" d="M81.09,84.44c.33-3.64,3.14-5.65,8.07-5.96l8.14-.49.07-.75c.25-2.76-1.2-3.4-3.96-3.65-2.85-.26-4.04.44-4.26,2.82l-.05.51-6.68-.6.05-.51c.5-5.61,5.18-8.91,11.81-8.31,6.91.62,10.22,4.73,9.66,10.99l-1.25,13.92-6.49-.58.29-3.18-.28-.02c-1.42,1.62-3.97,3.32-8.32,2.93-4.16-.37-7.18-2.86-6.8-7.11ZM90.71,86.43c2.85.26,5.86-.23,6.19-3.87l-6.82.42c-1.47.1-2.16.51-2.25,1.49-.11,1.26.83,1.77,2.89,1.95Z"/>
<path class="cls-9" d="M106.85,92.78l2.11-23.5,6.49.58-.37,4.11.28.02c1.5-2.55,4.19-4.24,8.31-3.87,6.12.55,8.37,4.85,7.92,9.85l-1.34,14.9-7.01-.63,1.21-13.5c.29-3.27-.68-4.53-4.23-4.85-3.36-.3-4.91.64-5.23,4.19l-1.19,13.31-6.96-.62Z"/>
<path class="cls-9" d="M132.86,102.6l.52-5.79,3.92.35c1.77.16,2.45-.02,3.28-1.45l.5-.85-7.84-23.4,7.8.7,2.95,10.15,1.27,4.68.51.05,1.85-4.4,4.2-9.51,7.8.7-12.72,24.2c-2.44,4.63-5.19,5.89-9.82,5.48-1.59-.14-3.29-.58-4.25-.9Z"/>
<path class="cls-9" d="M158.17,91.35c.33-3.64,3.14-5.65,8.07-5.96l8.14-.49.07-.75c.25-2.76-1.2-3.4-3.96-3.65-2.85-.26-4.04.44-4.26,2.82l-.05.51-6.68-.6.05-.51c.5-5.61,5.18-8.91,11.81-8.31,6.91.62,10.22,4.73,9.66,10.99l-1.25,13.92-6.49-.58.29-3.18-.28-.02c-1.42,1.62-3.97,3.32-8.32,2.93-4.16-.37-7.18-2.86-6.8-7.11ZM167.79,93.34c2.85.26,5.86-.23,6.19-3.87l-6.82.42c-1.47.1-2.16.51-2.25,1.49-.11,1.26.83,1.77,2.89,1.95Z"/>
</g>
<path class="cls-47" d="M53.13,138.81l3.46-38.57,29.42,2.64-.7,7.77-20.78-1.86-.68,7.54,19.92,1.79-.69,7.71-19.92-1.79-.7,7.77,20.78,1.86-.7,7.77-29.42-2.64Z"/>
<path class="cls-47" d="M86.84,127.33c.83-9.27,6.83-14.65,16.5-13.78,7.71.69,12.93,5.92,12.29,13.06l-.06.69-8.64-.77.04-.46c.29-3.28-1.45-4.54-5.02-4.86-4.15-.37-6.1,1.43-6.59,6.84-.48,5.35,1.13,7.47,5.27,7.84,3.57.32,5.51-.61,5.8-3.89l.04-.46,8.64.77-.06.69c-.64,7.14-6.88,11.34-14.88,10.62-9.56-.86-14.16-7.13-13.34-16.29Z"/>
<path class="cls-47" d="M118.56,130.11c.83-9.21,6.88-14.59,16.21-13.75,9.27.83,14.15,7.19,13.33,16.4-.82,9.15-6.76,14.54-16.03,13.71-9.33-.84-14.33-7.21-13.5-16.36ZM139.69,132.01c.51-5.64-.94-7.63-5.6-8.05-4.72-.42-6.5,1.27-7,6.92-.5,5.58.95,7.57,5.67,7.99,4.66.42,6.44-1.28,6.94-6.86Z"/>
<path class="cls-47" d="M150.77,147.57l3.46-38.57,8.58.77-1.22,13.64.35.03c1.54-2.3,4.85-4.21,9.22-3.82,7.94.71,11.61,7.02,10.79,16.17-.82,9.1-5.55,14.65-13.44,13.94-4.49-.4-7.79-2.44-9.06-5.69l-.29-.03-.38,4.26-8-.72ZM166.35,142.12c4.95.44,6.55-1.85,7.02-7.09.48-5.3-.63-7.83-5.64-8.28-4.09-.37-6.52.87-6.87,4.78l-.42,4.66c-.35,3.91,1.82,5.56,5.91,5.93Z"/>
<path class="cls-47" d="M185.17,136.09c.83-9.21,6.88-14.59,16.21-13.75,9.27.83,14.15,7.19,13.33,16.4-.82,9.15-6.76,14.54-16.03,13.71-9.33-.84-14.33-7.21-13.5-16.36ZM206.3,137.98c.51-5.64-.94-7.63-5.6-8.05-4.72-.42-6.5,1.27-7,6.92-.5,5.58.95,7.57,5.67,7.99,4.66.42,6.44-1.28,6.94-6.86Z"/>
<path class="cls-47" d="M220.13,144.22l1.1-12.32-4.61-.41.64-7.14,4.84.43,2.22-6.59,6.79.61-.6,6.74,8.17.73-.64,7.14-8.17-.73-1.02,11.34c-.23,2.53.61,2.9,4.35,3.23l3.57.32-.65,7.2c-1.41.16-3.68.25-5.69.07-7.54-.68-10.92-3.77-10.31-10.62Z"/>
<path class="cls-39" d="M250.99,156.37l1.59-17.75,18.62,1.67-1.59,17.75-18.62-1.67ZM254.23,132.52c.8-8.93.67-33.2,1.42-41.58l.68-7.62,21.01,1.89-.68,7.62c-.75,8.38-5.32,32.34-6.11,41.16l-16.33-1.46Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

420
wwwroot/css/output.css
View File

@ -8,6 +8,7 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717);
--color-red-400: oklch(70.4% 0.191 22.216);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
@ -51,6 +52,7 @@
--color-green-800: oklch(44.8% 0.119 151.328);
--color-green-900: oklch(39.3% 0.095 152.535);
--color-emerald-50: oklch(97.9% 0.021 166.113);
--color-emerald-100: oklch(95% 0.052 163.051);
--color-emerald-400: oklch(76.5% 0.177 163.223);
--color-emerald-500: oklch(69.6% 0.17 162.48);
--color-emerald-600: oklch(59.6% 0.145 163.225);
@ -69,9 +71,8 @@
--color-cyan-200: oklch(91.7% 0.08 205.041);
--color-cyan-500: oklch(71.5% 0.143 215.221);
--color-cyan-600: oklch(60.9% 0.126 221.723);
--color-cyan-700: oklch(52% 0.105 223.128);
--color-cyan-800: oklch(45% 0.085 224.283);
--color-sky-500: oklch(68.5% 0.169 237.323);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
@ -85,7 +86,9 @@
--color-indigo-50: oklch(96.2% 0.018 272.314);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-200: oklch(87% 0.065 274.039);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-indigo-700: oklch(45.7% 0.24 277.023);
--color-indigo-800: oklch(39.8% 0.195 277.366);
--color-purple-50: oklch(97.7% 0.014 308.299);
--color-purple-100: oklch(94.6% 0.033 307.174);
@ -99,16 +102,12 @@
--color-pink-200: oklch(89.9% 0.061 343.231);
--color-pink-500: oklch(65.6% 0.241 354.308);
--color-pink-600: oklch(59.2% 0.249 0.584);
--color-pink-700: oklch(52.5% 0.223 3.958);
--color-pink-800: oklch(45.9% 0.187 3.815);
--color-rose-100: oklch(94.1% 0.03 12.58);
--color-rose-500: oklch(64.5% 0.246 16.439);
--color-rose-600: oklch(58.6% 0.253 17.585);
--color-rose-700: oklch(51.4% 0.222 16.935);
--color-slate-50: oklch(98.4% 0.003 247.858);
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
@ -352,17 +351,6 @@
.visible\! {
visibility: visible !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
@ -429,6 +417,12 @@
.top-10 {
top: calc(var(--spacing) * 10);
}
.top-20 {
top: calc(var(--spacing) * 20);
}
.top-32 {
top: calc(var(--spacing) * 32);
}
.top-50 {
top: calc(var(--spacing) * 50);
}
@ -462,9 +456,21 @@
.right-5 {
right: calc(var(--spacing) * 5);
}
.right-6 {
right: calc(var(--spacing) * 6);
}
.right-8 {
right: calc(var(--spacing) * 8);
}
.right-10 {
right: calc(var(--spacing) * 10);
}
.right-12 {
right: calc(var(--spacing) * 12);
}
.right-20 {
right: calc(var(--spacing) * 20);
}
.right-\[15\%\] {
right: 15%;
}
@ -474,18 +480,36 @@
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.bottom-1 {
bottom: calc(var(--spacing) * 1);
}
.bottom-4 {
bottom: calc(var(--spacing) * 4);
}
.bottom-5 {
bottom: calc(var(--spacing) * 5);
}
.bottom-6 {
bottom: calc(var(--spacing) * 6);
}
.bottom-10 {
bottom: calc(var(--spacing) * 10);
}
.bottom-16 {
bottom: calc(var(--spacing) * 16);
}
.bottom-20 {
bottom: calc(var(--spacing) * 20);
}
.bottom-22 {
bottom: calc(var(--spacing) * 22);
}
.bottom-24 {
bottom: calc(var(--spacing) * 24);
}
.bottom-32 {
bottom: calc(var(--spacing) * 32);
}
.bottom-50 {
bottom: calc(var(--spacing) * 50);
}
@ -495,12 +519,15 @@
.bottom-\[5\%\] {
bottom: 5%;
}
.-left-3 {
left: calc(var(--spacing) * -3);
.-left-5 {
left: calc(var(--spacing) * -5);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
@ -513,6 +540,9 @@
.left-10 {
left: calc(var(--spacing) * 10);
}
.left-16 {
left: calc(var(--spacing) * 16);
}
.left-\[10\%\] {
left: 10%;
}
@ -825,12 +855,12 @@
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.mb-20 {
margin-bottom: calc(var(--spacing) * 20);
}
.mb-auto {
margin-bottom: auto;
}
.ml-0 {
margin-left: calc(var(--spacing) * 0);
}
.ml-0\.5 {
margin-left: calc(var(--spacing) * 0.5);
}
@ -913,6 +943,9 @@
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.h-0 {
height: calc(var(--spacing) * 0);
}
.h-0\.5 {
height: calc(var(--spacing) * 0.5);
}
@ -1006,15 +1039,15 @@
.h-\[140px\] {
height: 140px;
}
.h-\[300px\] {
height: 300px;
}
.h-\[350px\] {
height: 350px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[450px\] {
height: 450px;
}
.h-auto {
height: auto;
}
@ -1024,12 +1057,24 @@
.h-px {
height: 1px;
}
.max-h-64 {
max-height: calc(var(--spacing) * 64);
}
.max-h-\[60vh\] {
max-height: 60vh;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-screen {
min-height: 100vh;
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\.5 {
width: calc(var(--spacing) * 1.5);
}
@ -1147,9 +1192,6 @@
.max-w-7xl {
max-width: var(--container-7xl);
}
.max-w-\[85vw\] {
max-width: 85vw;
}
.max-w-\[200px\] {
max-width: 200px;
}
@ -1204,6 +1246,10 @@
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1 {
--tw-translate-x: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@ -1232,8 +1278,8 @@
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-full {
--tw-translate-x: 100%;
.-translate-y-1 {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
@ -1248,6 +1294,10 @@
--tw-translate-y: calc(var(--spacing) * -32);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1 {
--tw-translate-y: calc(var(--spacing) * 1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1\/2 {
--tw-translate-y: calc(1/2 * 100%);
translate: var(--tw-translate-x) var(--tw-translate-y);
@ -1260,6 +1310,10 @@
--tw-translate-y: calc(var(--spacing) * 48);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-full {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-0 {
--tw-scale-x: 0%;
--tw-scale-y: 0%;
@ -1360,6 +1414,9 @@
.items-start {
align-items: flex-start;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
@ -1451,6 +1508,13 @@
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.space-x-1 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-1\.5 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
@ -1554,6 +1618,10 @@
.rounded-xl {
border-radius: var(--radius-xl);
}
.rounded-t-3xl {
border-top-left-radius: var(--radius-3xl);
border-top-right-radius: var(--radius-3xl);
}
.rounded-t-lg {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
@ -1654,6 +1722,12 @@
.border-gray-200 {
border-color: var(--color-gray-200);
}
.border-gray-200\/50 {
border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
}
}
.border-gray-300 {
border-color: var(--color-gray-300);
}
@ -1672,6 +1746,9 @@
.border-indigo-200 {
border-color: var(--color-indigo-200);
}
.border-orange-100 {
border-color: var(--color-orange-100);
}
.border-orange-200 {
border-color: var(--color-orange-200);
}
@ -1681,6 +1758,9 @@
.border-pink-200 {
border-color: var(--color-pink-200);
}
.border-purple-100 {
border-color: var(--color-purple-100);
}
.border-purple-200 {
border-color: var(--color-purple-200);
}
@ -1741,6 +1821,12 @@
.bg-black {
background-color: var(--color-black);
}
.bg-black\/50 {
background-color: color-mix(in srgb, #000 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
}
.bg-black\/80 {
background-color: color-mix(in srgb, #000 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -1837,9 +1923,6 @@
.bg-orange-100 {
background-color: var(--color-orange-100);
}
.bg-orange-200 {
background-color: var(--color-orange-200);
}
.bg-orange-500 {
background-color: var(--color-orange-500);
}
@ -1873,6 +1956,9 @@
.bg-purple-500 {
background-color: var(--color-purple-500);
}
.bg-red-100 {
background-color: var(--color-red-100);
}
.bg-red-400 {
background-color: var(--color-red-400);
}
@ -1912,6 +1998,12 @@
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.bg-white\/15 {
background-color: color-mix(in srgb, #fff 15%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
}
}
.bg-white\/20 {
background-color: color-mix(in srgb, #fff 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -1936,12 +2028,21 @@
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.bg-white\/95 {
background-color: color-mix(in srgb, #fff 95%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
}
}
.bg-yellow-50 {
background-color: var(--color-yellow-50);
}
.bg-yellow-100 {
background-color: var(--color-yellow-100);
}
.bg-yellow-300 {
background-color: var(--color-yellow-300);
}
.bg-yellow-300\/20 {
background-color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2019,6 +2120,14 @@
--tw-gradient-from: var(--color-blue-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-500 {
--tw-gradient-from: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-600 {
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-700 {
--tw-gradient-from: var(--color-blue-700);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2081,6 +2190,10 @@
--tw-gradient-from: var(--color-orange-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-purple-50 {
--tw-gradient-from: var(--color-purple-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-purple-500 {
--tw-gradient-from: var(--color-purple-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2126,6 +2239,11 @@
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-black {
--tw-gradient-via: var(--color-black);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-black\/5 {
--tw-gradient-via: color-mix(in srgb, #000 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2168,6 +2286,11 @@
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-gray-900 {
--tw-gradient-via: var(--color-gray-900);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-gray-900\/60 {
--tw-gradient-via: color-mix(in srgb, oklch(21% 0.034 264.665) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2231,6 +2354,10 @@
--tw-gradient-to: var(--color-amber-800);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-black {
--tw-gradient-to: var(--color-black);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-black\/10 {
--tw-gradient-to: color-mix(in srgb, #000 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2238,6 +2365,14 @@
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-100 {
--tw-gradient-to: var(--color-blue-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-600 {
--tw-gradient-to: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-900 {
--tw-gradient-to: var(--color-blue-900);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2266,6 +2401,10 @@
--tw-gradient-to: var(--color-emerald-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-emerald-800 {
--tw-gradient-to: var(--color-emerald-800);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-emerald-800\/30 {
--tw-gradient-to: color-mix(in srgb, oklch(43.2% 0.095 166.913) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2285,6 +2424,10 @@
--tw-gradient-to: var(--color-green-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-green-100 {
--tw-gradient-to: var(--color-green-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-green-600 {
--tw-gradient-to: var(--color-green-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2301,6 +2444,10 @@
--tw-gradient-to: var(--color-indigo-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-orange-100 {
--tw-gradient-to: var(--color-orange-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-orange-400 {
--tw-gradient-to: var(--color-orange-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2313,6 +2460,14 @@
--tw-gradient-to: var(--color-pink-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-purple-100 {
--tw-gradient-to: var(--color-purple-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-purple-600 {
--tw-gradient-to: var(--color-purple-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-red-50 {
--tw-gradient-to: var(--color-red-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -2341,6 +2496,10 @@
--tw-gradient-to: var(--color-teal-300);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-teal-500 {
--tw-gradient-to: var(--color-teal-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-teal-500\/5 {
--tw-gradient-to: color-mix(in srgb, oklch(70.4% 0.14 182.503) 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -2378,6 +2537,9 @@
.object-cover {
object-fit: cover;
}
.object-center {
object-position: center;
}
.object-right {
object-position: right;
}
@ -2585,9 +2747,6 @@
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.pl-8 {
padding-left: calc(var(--spacing) * 8);
}
.pl-12 {
padding-left: calc(var(--spacing) * 12);
}
@ -2754,6 +2913,9 @@
.text-blue-300 {
color: var(--color-blue-300);
}
.text-blue-400 {
color: var(--color-blue-400);
}
.text-blue-500 {
color: var(--color-blue-500);
}
@ -2865,6 +3027,12 @@
.text-white {
color: var(--color-white);
}
.text-white\/10 {
color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.text-white\/70 {
color: color-mix(in srgb, #fff 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -3005,12 +3173,21 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-green-500 {
--tw-shadow-color: oklch(72.3% 0.219 149.579);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-green-500) var(--tw-shadow-alpha), transparent);
}
}
.shadow-green-500\/50 {
--tw-shadow-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.ring-green-600 {
--tw-ring-color: var(--color-green-600);
}
.ring-green-600\/20 {
--tw-ring-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@ -3075,6 +3252,11 @@
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(var(--blur-xl));
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@ -3295,6 +3477,13 @@
}
}
}
.group-hover\:text-gray-600 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: var(--color-gray-600);
}
}
}
.group-hover\:text-green-600 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
@ -3635,6 +3824,14 @@
}
}
}
.hover\:from-blue-100 {
&:hover {
@media (hover: hover) {
--tw-gradient-from: var(--color-blue-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:from-green-100 {
&:hover {
@media (hover: hover) {
@ -3651,6 +3848,14 @@
}
}
}
.hover\:from-orange-100 {
&:hover {
@media (hover: hover) {
--tw-gradient-from: var(--color-orange-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:from-orange-600 {
&:hover {
@media (hover: hover) {
@ -3659,6 +3864,14 @@
}
}
}
.hover\:from-purple-100 {
&:hover {
@media (hover: hover) {
--tw-gradient-from: var(--color-purple-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:via-emerald-700 {
&:hover {
@media (hover: hover) {
@ -3676,6 +3889,14 @@
}
}
}
.hover\:to-blue-200 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-blue-200);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-cyan-100 {
&:hover {
@media (hover: hover) {
@ -3684,6 +3905,14 @@
}
}
}
.hover\:to-green-200 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-green-200);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-green-800 {
&:hover {
@media (hover: hover) {
@ -3692,6 +3921,22 @@
}
}
}
.hover\:to-orange-200 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-orange-200);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-purple-200 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-purple-200);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-teal-700 {
&:hover {
@media (hover: hover) {
@ -3714,13 +3959,6 @@
}
}
}
.hover\:text-gray-200 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-200);
}
}
}
.hover\:text-gray-700 {
&:hover {
@media (hover: hover) {
@ -3749,6 +3987,13 @@
}
}
}
.hover\:text-green-800 {
&:hover {
@media (hover: hover) {
color: var(--color-green-800);
}
}
}
.hover\:text-orange-500 {
&:hover {
@media (hover: hover) {
@ -3763,13 +4008,6 @@
}
}
}
.hover\:text-orange-700 {
&:hover {
@media (hover: hover) {
color: var(--color-orange-700);
}
}
}
.hover\:text-orange-800 {
&:hover {
@media (hover: hover) {
@ -3864,11 +4102,6 @@
--tw-ring-color: var(--color-green-500);
}
}
.focus\:ring-orange-400 {
&:focus {
--tw-ring-color: var(--color-orange-400);
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
@ -3950,11 +4183,21 @@
top: calc(var(--spacing) * 24);
}
}
.md\:right-5 {
@media (width >= 48rem) {
right: calc(var(--spacing) * 5);
}
}
.md\:right-10 {
@media (width >= 48rem) {
right: calc(var(--spacing) * 10);
}
}
.md\:bottom-5 {
@media (width >= 48rem) {
bottom: calc(var(--spacing) * 5);
}
}
.md\:left-10 {
@media (width >= 48rem) {
left: calc(var(--spacing) * 10);
@ -4110,11 +4353,6 @@
width: calc(33.333% - 1rem);
}
}
.md\:w-auto {
@media (width >= 48rem) {
width: auto;
}
}
.md\:max-w-6xl {
@media (width >= 48rem) {
max-width: var(--container-6xl);
@ -4158,6 +4396,11 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.md\:grid-cols-6 {
@media (width >= 48rem) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
@ -4198,6 +4441,11 @@
gap: calc(var(--spacing) * 8);
}
}
.md\:gap-12 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 12);
}
}
.md\:space-y-0 {
@media (width >= 48rem) {
:where(& > :not(:last-child)) {
@ -4207,15 +4455,6 @@
}
}
}
.md\:space-x-6 {
@media (width >= 48rem) {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
}
}
}
.md\:space-x-8 {
@media (width >= 48rem) {
:where(& > :not(:last-child)) {
@ -4230,6 +4469,11 @@
align-self: flex-start;
}
}
.md\:rounded-2xl {
@media (width >= 48rem) {
border-radius: var(--radius-2xl);
}
}
.md\:rounded-tr-\[30px\] {
@media (width >= 48rem) {
border-top-right-radius: 30px;
@ -4260,6 +4504,11 @@
padding-top: calc(var(--spacing) * 0);
}
}
.md\:pt-8 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 8);
}
}
.md\:pt-12 {
@media (width >= 48rem) {
padding-top: calc(var(--spacing) * 12);
@ -4275,6 +4524,11 @@
padding-top: calc(var(--spacing) * 28);
}
}
.md\:pb-0 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 0);
}
}
.md\:pb-16 {
@media (width >= 48rem) {
padding-bottom: calc(var(--spacing) * 16);
@ -4349,6 +4603,12 @@
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.md\:text-xs {
@media (width >= 48rem) {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
}
.lg\:col-span-1 {
@media (width >= 64rem) {
grid-column: span 1 / span 1;
@ -4487,11 +4747,6 @@
padding-inline: calc(var(--spacing) * 12);
}
}
.lg\:py-4 {
@media (width >= 64rem) {
padding-block: calc(var(--spacing) * 4);
}
}
.lg\:text-left {
@media (width >= 64rem) {
text-align: left;
@ -4534,21 +4789,6 @@
}
}
}
.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;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;

46
wwwroot/css/scroll-snap.css 100644
View File

@ -0,0 +1,46 @@
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.section:nth-child(1) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.section:nth-child(2) {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.section:nth-child(3) {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.section:nth-child(4) {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.section-content {
text-align: center;
color: white;
max-width: 800px;
padding: 2rem;
}
.section h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.section p {
font-size: 1.2rem;
line-height: 1.6;
}

20
wwwroot/css/site.css
View File

@ -1,21 +1 @@
@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;
}

19
wwwroot/css/website.css 100644
View File

@ -0,0 +1,19 @@
.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;
}

96
wwwroot/js/scroll-snap.js 100644
View File

@ -0,0 +1,96 @@
document.addEventListener("DOMContentLoaded", function () {
let isScrolling = false;
let currentSection = 0;
const sections = document.querySelectorAll(".section");
const container = document.querySelector(".scroll-container");
// Navigation dengan keyboard
document.addEventListener("keydown", function (e) {
if (isScrolling) return;
if (e.key === "ArrowDown" || e.key === "PageDown") {
e.preventDefault();
scrollToNextSection();
} else if (e.key === "ArrowUp" || e.key === "PageUp") {
e.preventDefault();
scrollToPrevSection();
}
});
// Touch/Wheel events untuk scroll snap yang lebih responsif
let touchStartY = 0;
let touchEndY = 0;
container.addEventListener("touchstart", function (e) {
touchStartY = e.changedTouches[0].screenY;
});
container.addEventListener("touchend", function (e) {
if (isScrolling) return;
touchEndY = e.changedTouches[0].screenY;
handleSwipe();
});
function handleSwipe() {
const swipeThreshold = 50;
const diff = touchStartY - touchEndY;
if (Math.abs(diff) > swipeThreshold) {
if (diff > 0) {
scrollToNextSection();
} else {
scrollToPrevSection();
}
}
}
function scrollToNextSection() {
if (currentSection < sections.length - 1) {
currentSection++;
scrollToSection(currentSection);
}
}
function scrollToPrevSection() {
if (currentSection > 0) {
currentSection--;
scrollToSection(currentSection);
}
}
function scrollToSection(index) {
if (index >= 0 && index < sections.length) {
isScrolling = true;
sections[index].scrollIntoView({
behavior: "smooth",
block: "start",
});
setTimeout(() => {
isScrolling = false;
}, 800);
}
}
// Update current section berdasarkan scroll position
container.addEventListener("scroll", function () {
if (isScrolling) return;
const scrollTop = container.scrollTop;
const sectionHeight = window.innerHeight;
const newCurrentSection = Math.round(scrollTop / sectionHeight);
if (
newCurrentSection !== currentSection &&
newCurrentSection >= 0 &&
newCurrentSection < sections.length
) {
currentSection = newCurrentSection;
}
});
// API untuk navigasi programmatic
window.scrollToSection = scrollToSection;
window.getCurrentSection = () => currentSection;
});