478 lines
19 KiB
Plaintext
478 lines
19 KiB
Plaintext
<footer class="bg-oren pt-8">
|
||
<!-- Main Footer Section -->
|
||
<div class="relative max-w-6xl bg-ijo rounded-2xl mx-auto overflow-hidden shadow-2xl">
|
||
<!-- Background Pattern -->
|
||
<div class="absolute inset-0 opacity-20">
|
||
<div class="absolute inset-0"
|
||
style="background-image: url('@Url.Content("~/assets/images/home/bg-green.png")'); background-size: fit; background-position: bottom; background-repeat: no-repeat;"></div>
|
||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-emerald-800/30"></div>
|
||
</div>
|
||
|
||
<!-- Decorative Elements -->
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div>
|
||
<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">
|
||
<!-- Left Section -->
|
||
<div class="flex flex-col text-center justify-center lg:text-left">
|
||
<div class="inline-block">
|
||
<h2 class="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight">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>
|
||
</div>
|
||
<p class="text-green-100 text-lg leading-relaxed max-w-sm mx-auto lg:mx-0">
|
||
Bersama membangun Jakarta yang hijau dan berkelanjutan untuk generasi mendatang
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Center Section -->
|
||
<div class="relative justify-center items-end hidden md:flex">
|
||
<div class="relative">
|
||
<div class="absolute inset-0 bg-white/20 rounded-full blur-3xl transform scale-300"></div>
|
||
<img src="@Url.Content("~/assets/images/home/monas.svg")" alt="Monas Jakarta" class="relative z-10 max-w-full drop-shadow-2xl">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Section -->
|
||
<div class="text-left py-12">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 lg:p-6 border border-white/20">
|
||
<h3 class="text-xl lg:text-2xl font-bold text-white mb-4 lg:mb-6 flex items-center justify-center lg:justify-start">
|
||
<i class="text-yellow-300 w-6 h-6 lg:w-8 lg:h-8 mr-2" data-lucide="phone-call"></i>
|
||
Kontak Kami
|
||
</h3>
|
||
|
||
<div class="space-y-3 lg:space-y-4">
|
||
<div class="flex items-start space-x-3">
|
||
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<i class="text-yellow-300 w-4 h-4"data-lucide="map-pin"></i>
|
||
</div>
|
||
<div class="text-left">
|
||
<p class="text-white font-medium text-sm lg:text-base">Alamat</p>
|
||
<p class="text-green-100 text-xs lg:text-sm leading-relaxed">
|
||
Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Kota Jakarta Timur, DKI Jakarta 13640
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-3">
|
||
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<i class="text-yellow-300 w-4 h-4"data-lucide="phone"></i>
|
||
</div>
|
||
<div class="text-left">
|
||
<p class="text-white font-medium text-sm lg:text-base">Telepon</p>
|
||
<p class="text-green-100 text-xs lg:text-sm">(021) 8092744</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-3">
|
||
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<i class="text-yellow-300 w-4 h-4"data-lucide="mail"></i>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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">
|
||
<!-- 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>
|
||
<h4 class="font-semibold text-xl md:text-2xl">Tentang<br class="hidden md:block"> Kami</h4>
|
||
</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>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Section -->
|
||
<div class="bg-black py-6">
|
||
<div class="container max-w-6xl mx-auto px-4">
|
||
<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" />
|
||
<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>
|
||
</div>
|
||
</a>
|
||
<div class="text-xs md:text-sm text-center md:text-right">
|
||
<p>© @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi Jakarta</p>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- Chatbot -->
|
||
<div id="chatbot" class="fixed bottom-20 right-5 w-80 h-96 bg-white rounded-lg shadow-xl transform transition-all duration-300 scale-0 z-50">
|
||
<div class="flex justify-between items-center bg-blue-600 text-white p-4 rounded-t-lg">
|
||
<h3 class="font-semibold text-lg flex items-center">
|
||
<i class="text-yellow-300 w-6 h-6 lg:w-8 lg:h-8 mr-2" data-lucide="bot-message-square"></i>EcoBot</h3>
|
||
<button id="closeChat" class="text-white font-bold text-xl">×</button>
|
||
</div>
|
||
<div class="chat-content p-4 h-72 overflow-y-auto bg-gray-50 rounded-b-lg">
|
||
<div class="chat-bubble bot" style="float: left; clear: both;">
|
||
<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>
|
||
</div>
|
||
<!-- Chat messages will appear here -->
|
||
</div>
|
||
<div class="flex items-center p-4 bg-green-100 border-t border-gray-300 rounded-b-lg">
|
||
<input type="text" id="userInput" placeholder="Type a message..." class="w-full p-2 rounded-lg border border-gray-300" />
|
||
<button id="sendMessage" class="ml-2 p-2 bg-green-600 text-white rounded-lg">Send</button>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
<style>
|
||
a.flip-animate {
|
||
perspective: 1000px;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
a.flip-animate span {
|
||
position: relative;
|
||
display: inline-block;
|
||
transition: transform 0.6s ease-in-out;
|
||
transform-origin: 50% 0;
|
||
transform-style: preserve-3d;
|
||
}
|
||
a.flip-animate span:before {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
content: attr(data-hover);
|
||
transform: rotateX(-90deg);
|
||
transform-origin: 50% 0;
|
||
text-align: center;
|
||
color: #fde047;
|
||
backface-visibility: hidden;
|
||
}
|
||
a.flip-animate.flipped span {
|
||
transform: rotateX(90deg) translateY(-22px);
|
||
backface-visibility: hidden;
|
||
}
|
||
a.flip-animate.flipped span:before {
|
||
color: #fbbf24;
|
||
}
|
||
|
||
.chat-content {
|
||
background: linear-gradient(135deg, #e6f9e6 0%, #e0f7fa 100%);
|
||
border-radius: 0.75rem;
|
||
padding: 1rem;
|
||
min-height: 200px;
|
||
font-size: 1rem;
|
||
box-shadow: 0 2px 8px 0 #22c55e33;
|
||
}
|
||
.chat-bubble {
|
||
display: block;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 1.2em;
|
||
margin-bottom: 0.5rem;
|
||
max-width: 80%;
|
||
word-break: break-word;
|
||
box-shadow: 0 1px 4px 0 #22c55e22;
|
||
position: relative;
|
||
font-size: 0.98rem;
|
||
transition: background 0.2s;
|
||
clear: both;
|
||
}
|
||
.chat-bubble.user {
|
||
background: linear-gradient(135deg, #bbf7d0 0%, #4ade80 100%);
|
||
color: #134e1c;
|
||
float: right;
|
||
border-bottom-right-radius: 0.3em;
|
||
border: 1.5px solid #22c55e;
|
||
text-align: right;
|
||
font-size: 10pt;
|
||
}
|
||
.chat-bubble.bot {
|
||
background: linear-gradient(135deg, #fff 0%, #d1fae5 100%);
|
||
color: #134e1c;
|
||
float: left;
|
||
border-bottom-left-radius: 0.3em;
|
||
border: 1.5px solid #22c55e;
|
||
text-align: left;
|
||
font-size: 10pt;
|
||
}
|
||
.chat-bubble.time {
|
||
background: transparent;
|
||
color: #888;
|
||
font-size: 0.8rem;
|
||
box-shadow: none;
|
||
text-align: center;
|
||
margin: 0.5rem auto;
|
||
display: block;
|
||
}
|
||
.chat-content p {
|
||
margin: 0.2rem 0;
|
||
}
|
||
.chat-bubble.user:after {
|
||
content: "";
|
||
position: absolute;
|
||
right: -10px;
|
||
bottom: 0;
|
||
width: 16px;
|
||
height: 20px;
|
||
background: transparent;
|
||
background-image: radial-gradient(circle at 0 0, #4ade80 60%, transparent 61%);
|
||
z-index: 1;
|
||
}
|
||
.chat-bubble.bot:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: -10px;
|
||
bottom: 0;
|
||
width: 16px;
|
||
height: 20px;
|
||
background: transparent;
|
||
background-image: radial-gradient(circle at 100% 0, #d1fae5 60%, transparent 61%);
|
||
z-index: 1;
|
||
}
|
||
#chatbot .bg-blue-600 {
|
||
background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%) !important;
|
||
}
|
||
#chatbot h3 {
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
}
|
||
#chatbot button#closeChat {
|
||
color: #fff;
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
transition: color 0.2s;
|
||
}
|
||
#chatbot button#closeChat:hover {
|
||
color: #22c55e;
|
||
}
|
||
#chatbot input[type="text"] {
|
||
border: 1.5px solid #22c55e;
|
||
background: #f0fdf4;
|
||
}
|
||
#chatbot button#sendMessage {
|
||
background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
|
||
color: #fff;
|
||
font-weight: bold;
|
||
border: none;
|
||
transition: background 0.2s;
|
||
}
|
||
#chatbot button#sendMessage:hover {
|
||
background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
|
||
}
|
||
|
||
/* Typing indicator animation */
|
||
.typing-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.5rem 1rem;
|
||
background: linear-gradient(135deg, #fff 0%, #d1fae5 100%);
|
||
border: 1.5px solid #22c55e;
|
||
border-radius: 1.2em;
|
||
border-bottom-left-radius: 0.3em;
|
||
float: left;
|
||
clear: both;
|
||
margin-bottom: 0.5rem;
|
||
max-width: 80%;
|
||
box-shadow: 0 1px 4px 0 #22c55e22;
|
||
}
|
||
.typing-indicator span {
|
||
height: 8px;
|
||
width: 8px;
|
||
float: left;
|
||
margin: 0 1px;
|
||
background-color: #22c55e;
|
||
display: block;
|
||
border-radius: 50%;
|
||
opacity: 0.4;
|
||
animation: typing 1.4s infinite ease-in-out both;
|
||
}
|
||
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
||
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
||
.typing-indicator span:nth-child(3) { animation-delay: 0s; }
|
||
@@keyframes typing {
|
||
0%, 80%, 100% {
|
||
transform: scale(0);
|
||
opacity: 0.5;
|
||
}
|
||
40% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.typing-text {
|
||
margin-left: 8px;
|
||
color: #22c55e;
|
||
font-size: 0.9rem;
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const flipElement = document.querySelector('.flip-animate');
|
||
|
||
if (flipElement) {
|
||
setInterval(function() {
|
||
flipElement.classList.toggle('flipped');
|
||
}, 1500);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const chatButton = document.getElementById("chatButton");
|
||
const chatbot = document.getElementById("chatbot");
|
||
const closeChat = document.getElementById("closeChat");
|
||
const sendMessage = document.getElementById("sendMessage");
|
||
const userInput = document.getElementById("userInput");
|
||
|
||
chatButton.addEventListener("click", () => {
|
||
chatbot.classList.remove('scale-0');
|
||
chatbot.classList.add('scale-100');
|
||
});
|
||
|
||
closeChat.addEventListener("click", () => {
|
||
chatbot.classList.remove('scale-100');
|
||
chatbot.classList.add('scale-0');
|
||
});
|
||
|
||
sendMessage.addEventListener("click", sendChatMessage);
|
||
userInput.addEventListener("keydown", function(e) {
|
||
if (e.key === "Enter") sendChatMessage();
|
||
});
|
||
|
||
function sendChatMessage() {
|
||
const chatContent = document.querySelector(".chat-content");
|
||
const message = userInput.value.trim();
|
||
|
||
if (message) {
|
||
// User bubble (kanan)
|
||
const userBubble = document.createElement("div");
|
||
userBubble.className = "chat-bubble user";
|
||
userBubble.style.cssFloat = "right";
|
||
userBubble.style.clear = "both";
|
||
userBubble.textContent = message;
|
||
chatContent.appendChild(userBubble);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
|
||
userInput.value = '';
|
||
|
||
// Show typing indicator
|
||
const typingIndicator = document.createElement("div");
|
||
typingIndicator.className = "typing-indicator";
|
||
typingIndicator.innerHTML = `
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
@* <span class="typing-text">EcoBot sedang mengetik...</span> *@
|
||
`;
|
||
chatContent.appendChild(typingIndicator);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
|
||
fetch('/api/apiproxy/chatbot', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
message: message
|
||
})
|
||
})
|
||
.then(response => {
|
||
return response.json().catch(() => response.text());
|
||
})
|
||
.then(data => {
|
||
// Remove typing indicator
|
||
typingIndicator.remove();
|
||
|
||
let reply = "";
|
||
if (data && typeof data === "object" && data.code === 404 && data.message && data.message.includes("webhook")) {
|
||
reply = "Bot sedang offline. Silakan klik 'Execute workflow' di n8n, lalu coba lagi.";
|
||
} else if (typeof data === "string") {
|
||
try {
|
||
const parsed = JSON.parse(data);
|
||
reply = parsed.output || parsed.reply || parsed.message || parsed.text || "";
|
||
} catch {
|
||
reply = data;
|
||
}
|
||
} else if (typeof data === "object" && data !== null) {
|
||
reply = data.output || data.reply || data.message || data.text || "";
|
||
}
|
||
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)
|
||
const botBubble = document.createElement("div");
|
||
botBubble.className = "chat-bubble bot";
|
||
botBubble.style.cssFloat = "left";
|
||
botBubble.style.clear = "both";
|
||
botBubble.innerHTML = reply;
|
||
chatContent.appendChild(botBubble);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
})
|
||
.catch(error => {
|
||
// Remove typing indicator
|
||
typingIndicator.remove();
|
||
|
||
const botBubble = document.createElement("div");
|
||
botBubble.className = "chat-bubble bot";
|
||
botBubble.style.cssFloat = "left";
|
||
botBubble.style.clear = "both";
|
||
botBubble.textContent = "Maaf, terjadi kesalahan koneksi.";
|
||
chatContent.appendChild(botBubble);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
</script>
|