Fix: Update form title and remove unused user details code

This commit updates the form title in index.html to "Mayagen Demo Gratis". It also removes unused code related to user details from script.js, which was likely leftover from a previous feature and is no longer needed.
Remove chat page and update color palette
2025-07-21 22:05:41 +07:00 · 2025-07-21 21:41:55 +07:00 · 2025-07-21 14:44:06 +07:00
11 changed files with 1682 additions and 259 deletions
--- a/chat-page/script.js
+++ b/chat-page/script.js
@@ -1,164 +0,0 @@
-// Fungsi untuk menambahkan pesan baru ke area chat
-function addMessage(content, isSent) {
-    const chatArea = document.querySelector('.chat-area');
-    
-    // Buat elemen pesan
-    const message = document.createElement('div');
-    message.className = `message ${isSent ? 'sent' : 'received'}`;
-    
-// Ambil inisial dari nama di header
-const userName = document.querySelector('.user-details h2').textContent;
-const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja
-
-// Tambahkan avatar kecil untuk pesan masuk
-if (!isSent) {
-    const smallAvatar = document.createElement('div');
-    smallAvatar.className = 'small-avatar';
-    smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
-    message.appendChild(smallAvatar);
-} else {
-        // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
-        const personIcon = document.createElement('i');
-        personIcon.className = 'bi bi-person sent-user-icon';
-        message.appendChild(personIcon);
-    }
-    
-    // Tambahkan konten pesan
-    const messageContent = document.createElement('div');
-    messageContent.className = 'message-content';
-    messageContent.textContent = content;
-    
-    // Tambahkan waktu pesan
-    const now = new Date();
-    const time = now.getHours().toString().padStart(2, '0') + ':' + 
-                now.getMinutes().toString().padStart(2, '0');
-    
-    const messageTime = document.createElement('div');
-    messageTime.className = 'message-time';
-    messageTime.textContent = time;
-    
-    // Gabungkan semua elemen
-    message.appendChild(messageContent);
-    message.appendChild(messageTime);
-    
-    // Tambahkan ke area chat dengan animasi
-    chatArea.appendChild(message);
-    
-    // Scroll ke bawah untuk melihat pesan terbaru
-    chatArea.scrollTop = chatArea.scrollHeight;
-}
-
-// Fungsi untuk menampilkan indikator mengetik
-function showTypingIndicator() {
-    const chatArea = document.querySelector('.chat-area');
-    const typingIndicator = document.createElement('div');
-    typingIndicator.className = 'typing-indicator';
-    typingIndicator.innerHTML = `
-        <div class="typing-dots">
-            <span></span>
-            <span></span>
-            <span></span>
-        </div>
-    `;
-    chatArea.appendChild(typingIndicator);
-    chatArea.scrollTop = chatArea.scrollHeight;
-    return typingIndicator;
-}
-
-// Fungsi untuk menyembunyikan indikator mengetik
-function hideTypingIndicator(indicator) {
-    if (indicator) {
-        indicator.remove();
-    }
-}
-
-// Fungsi untuk mengirim pesan
-function sendMessage() {
-    const input = document.querySelector('.message-input');
-    const message = input.value.trim();
-    
-    if (message) {
-        addMessage(message, true);
-        input.value = '';
-        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
-        
-        // Simulasikan balasan otomatis setelah 2 detik
-        setTimeout(() => {
-            const typingIndicator = showTypingIndicator();
-            
-            // Setelah 3 detik, sembunyikan indikator dan tampilkan balasan
-            setTimeout(() => {
-                hideTypingIndicator(typingIndicator);
-                addMessage('Pesan Anda sudah saya terima. Terima kasih!', false);
-            }, 3000);
-        }, 2000);
-    }
-}
-
-// Function to toggle attachment icons visibility
-function toggleAttachmentIcons(show) {
-    const icons = document.querySelector('.attachment-icons');
-    if (show) {
-        icons.style.opacity = '1';
-        icons.style.transform = 'translateY(-50%)';
-    } else {
-        icons.style.opacity = '0';
-        icons.style.transform = 'translateY(-50%) translateX(20px)';
-    }
-}
-
-// Event listener untuk tombol kirim
-document.querySelector('.send-btn').addEventListener('click', sendMessage);
-
-// Event listener untuk tombol Enter
-document.querySelector('.message-input').addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-        sendMessage();
-    }
-});
-
-// Event listener untuk input text
-const messageInput = document.querySelector('.message-input');
-messageInput.addEventListener('input', function() {
-    if (this.value.trim() !== '') {
-        toggleAttachmentIcons(false);
-    } else {
-        toggleAttachmentIcons(true);
-    }
-});
-
-// Initialize attachment icons
-document.addEventListener('DOMContentLoaded', () => {
-    toggleAttachmentIcons(true);
-});
-
-// Inisialisasi chat setelah DOM selesai dimuat
-document.addEventListener('DOMContentLoaded', () => {
-    // Tampilkan indikator mengetik saat halaman pertama dimuat
-    const initialTyping = showTypingIndicator();
-    
-    // Setelah 3 detik, tampilkan pesan sapaan
-    setTimeout(() => {
-        hideTypingIndicator(initialTyping);
-        addMessage('Hai, ada yang bisa saya bantu?', false);
-    }, 3000);
-    
-// Update avatar utama dengan inisial dari nama saat halaman dimuat
-document.addEventListener('DOMContentLoaded', () => {
-    // Handle viewport height for mobile browsers
-    const setVh = () => {
-        const vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty('--vh', `${vh}px`);
-    };
-    setVh();
-    window.addEventListener('resize', setVh);
-    window.addEventListener('load', setVh);
-    
-    const userName = document.querySelector('.user-details h2').textContent;
-    const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
-    document.querySelector('.avatar').textContent = userInitial;
-});
-});
-
-// Pastikan animasi mengetik muncul sebelum pesan sambutan
-// (Sudah diimplementasikan di atas)
--- a/color-pallete.md
+++ b/color-pallete.md
@@ -1,6 +1,4 @@
-03045e
-023e8a
-0077b6
-0096c7
-48cae4
-ade8f4
+604CC3 Untuk Tombol Send, Avatar, dan Avatar di Bubble Admin
+FFF6E9 Untuk Buble Chat User dan Admin
+80C4E9 Untuk Background Chat
+604CC3 Untuk Header dan input field
--- a/dashboard-page/index.html
+++ b/dashboard-page/index.html
@@ -16,31 +16,31 @@
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body style="font-family: Inter, 'Noto Sans', sans-serif; display: flex; flex-direction: column; min-height: 100vh; padding: 0; background: linear-gradient(135deg, #0077b6, #023e8a) !important;">
-    <header>
-        <div class="mobile-header-user-info">
-          <div
+<header>
+    <div class="mobile-header-user-info">
+        <div
            class="mobile-header-avatar"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDdsEbNptWuGWnUFVjxjJbETG3Ux0dsBq6vJXBqGqxirKQZ5h08CrhYiwt89C2-bjXZjh3bpwhhheIQH7TY4OfQvZjIE93FvpVViGxSvYuMDJylveD2lc-daeSlCOr8t64jpRbHrEXM0JGuM-CGz99i7dCKdfgcBu7EEecYOxvaPyTNOskRBL3yUkN9tJ659LAKvkEeum2-SYZ1htR83YgVFVP-n8-XoZBoQaa5W7vOC0TZtlOldU-Cq8EkbxM_HQH3prpaomyTJdCF");'
-          ></div>
-          <h2 class="mobile-header-title">BeautyBot Analytics</h2>
-        </div>
-        <div class="mobile-header-right">
-          <button class="mobile-header-menu-button">
+        ></div>
+        <h2 class="mobile-header-title">BeautyBot Analytics</h2>
+    </div>
+    <div class="mobile-header-right">
+        <button class="mobile-header-menu-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
-              <path
-                d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
-              ></path>
+                <path
+                    d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
+                ></path>
            </svg>
-          </button>
-          <div class="dropdown-menu hidden">
+        </button>
+        <div class="dropdown-menu hidden">
            <button class="control-button">
-              <span class="truncate">Ekspor Data</span>
+                <span class="truncate">Ekspor Data</span>
            </button>
-          </div>
        </div>
-    </header>
+    </div>
+</header>
    
-    <main>
+    <main class="container mx-auto px-4">
      <div class="layout-content-container">
        <h2 class="text-[#141414] tracking-light text-[28px] font-bold leading-tight px-4 text-left pb-3 pt-5">Chatbot Performance Overview</h2>
        <div class="controls-container">
@@ -229,6 +229,7 @@
      </div>
    </main>

+    <script src="scripts/main.js"></script>
    <!-- Floating circles background -->
    <ul class="floating-circles">
      <li></li><li></li><li></li><li></li><li></li>
--- a/dashboard-page/scripts/main.js
+++ b/dashboard-page/scripts/main.js
@@ -4,13 +4,13 @@ const dropdownMenu = document.querySelector('.dropdown-menu');

 if (menuButton && dropdownMenu) {
    menuButton.addEventListener('click', function() {
-        dropdownMenu.classList.toggle('visible');
+        dropdownMenu.classList.toggle('hidden');
    });
 }

 // Close dropdown when clicking outside
 document.addEventListener('click', function(event) {
    if (!event.target.closest('.mobile-header-right') && dropdownMenu) {
-        dropdownMenu.classList.remove('visible');
+        dropdownMenu.classList.add('hidden');
    }
 });
--- a/dashboard-page/styles/main.css
+++ b/dashboard-page/styles/main.css
@@ -18,6 +18,14 @@ body {
  padding: 0 20px; /* Tambahan padding horizontal */
 }

+/* Container for responsive design */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
 /* Universal Header (works for both desktop and mobile) */
 header {
  position: sticky;
@@ -27,18 +35,19 @@ header {
  backdrop-filter: blur(35px);
  border-radius: 0 0 20px 20px;
  margin: 0;
-  padding: 20px 25px; /* Increased vertical padding */
+  padding: 20px 25px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
-  min-height: 110px; /* Significantly taller header */
+  min-height: 110px;
  width: 100%;
  max-width: 100%;
  display: flex;
-  flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
+  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
-  gap: 15px; /* Consistent spacing between elements */
+  gap: 15px;
 }

+
 /* Universal Header Elements */
 .mobile-header-user-info {
  display: flex;
@@ -253,12 +262,37 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }

 /* Responsivitas */
@media (max-width: 768px) {
+  /* Show mobile elements, hide desktop nav */
+  .mobile-header-user-info,
+  .mobile-header-right {
+    display: flex;
+  }
+  
+  .desktop-nav {
+    display: none;
+  }
+  
+  /* Stack cards vertically on mobile */
+  #stat-cards, #secondary-stats {
+    grid-template-columns: 1fr;
+  }
+  
+  /* Adjust header layout for mobile */
+  header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 15px;
+  }
+  
+  .mobile-header-right {
+    align-self: flex-end;
+    margin-top: -50px;
+  }
+
  body {
    padding: 0 10px;
  }

-/* Removed mobile-specific scaling as we now have universal styles */
-
  /* Stat Cards */
  #stat-cards, #secondary-stats {
    flex-direction: column;
@@ -285,24 +319,35 @@ th:nth-child(3), td:nth-child(3) { width: 30%; }
  }
 }

+@media (min-width: 769px) {
+  /* Adjust header layout for desktop */
+  header {
+    padding: 15px 25px;
+  }
+  
+  .mobile-header-user-info {
+    display: flex;
+    align-items: center;
+  }
+  
+  .mobile-header-right {
+    display: flex;
+  }
+}
+
 /* Definitive Vertical Layout */
 .controls-container,
 .card-container {
    display: block;
 }

-/* Definitive Horizontal Layout for Stat Cards */
+/* Responsive Layout for Cards */
 #stat-cards, #secondary-stats {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
 }

-#stat-cards > div, #secondary-stats > div {
-    flex: 1; /* Ensure cards share space equally */
-}
-
 /* Ensure cards within the container stack vertically */
 .card-container > div {
    margin-bottom: 20px; /* Add space between vertical cards */
--- a/form-page/chat-page/index.html
+++ b/form-page/chat-page/index.html
@@ -27,31 +27,16 @@
        <!-- Header dengan avatar dan nama pengguna -->
        <header class="chat-header">
 <div class="user-info">
-    <div class="avatar">J</div>
+    <div class="avatar">M</div>
    <div class="user-details">
-        <h2>John Doe</h2>
-        <span class="user-role">Virtual Assistant - Bake Shop</span>
+        <h2>Maya</h2>
+        <span class="user-role">Virtual Assistant - Demo</span>
    </div>
 </div>
        </header>
        
        <!-- Area chat utama -->
        <div class="chat-area">
-            <!-- Contoh pesan masuk -->
-            <div class="message received">
-                <div class="message-content">
-                    Hai, ada kabar terbaru?
-                </div>
-                <div class="message-time">10:00</div>
-            </div>
-            
-            <!-- Contoh pesan keluar -->
-            <div class="message sent">
-                <div class="message-content">
-                    Iya, proyek baru sudah selesai!
-                </div>
-                <div class="message-time">10:01</div>
-            </div>
        </div>
        
        <!-- Input area with WhatsApp-like design -->
--- a/form-page/chat-page/script.js
+++ b/form-page/chat-page/script.js
@@ -0,0 +1,255 @@
+// Check if leadData exists in localStorage
+if (!localStorage.getItem('leadData')) {
+    window.location.href = '../index.html'; // Redirect to form page
+}
+
+// Fungsi untuk menambahkan pesan baru ke area chat
+function addMessage(content, isSent) {
+    const chatArea = document.querySelector('.chat-area');
+    
+    // Buat elemen pesan
+    const message = document.createElement('div');
+    message.className = `message ${isSent ? 'sent' : 'received'}`;
+    
+    // Ambil inisial dari nama di header
+    const userName = document.querySelector('.user-details h2').textContent;
+    const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja
+
+    // Tambahkan avatar kecil untuk pesan masuk
+    if (!isSent) {
+        const smallAvatar = document.createElement('div');
+        smallAvatar.className = 'small-avatar';
+        smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
+        message.appendChild(smallAvatar);
+    } else {
+        // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
+        const personIcon = document.createElement('i');
+        personIcon.className = 'bi bi-person sent-user-icon';
+        message.appendChild(personIcon);
+    }
+    
+    // Tambahkan konten pesan
+    const messageContent = document.createElement('div');
+    messageContent.className = 'message-content';
+    messageContent.textContent = content;
+    
+    // Tambahkan waktu pesan
+    const now = new Date();
+    const time = now.getHours().toString().padStart(2, '0') + ':' + 
+                now.getMinutes().toString().padStart(2, '0');
+    
+    const messageTime = document.createElement('div');
+    messageTime.className = 'message-time';
+    messageTime.textContent = time;
+    
+    // Gabungkan semua elemen
+    message.appendChild(messageContent);
+    message.appendChild(messageTime);
+    
+    // Tambahkan ke area chat dengan animasi
+    chatArea.appendChild(message);
+    
+    // Scroll ke bawah untuk melihat pesan terbaru
+    chatArea.scrollTop = chatArea.scrollHeight;
+}
+
+// Fungsi untuk menampilkan indikator mengetik
+function showTypingIndicator() {
+    const chatArea = document.querySelector('.chat-area');
+    const typingIndicator = document.createElement('div');
+    typingIndicator.className = 'typing-indicator';
+    typingIndicator.innerHTML = `
+        <div class="typing-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    `;
+    chatArea.appendChild(typingIndicator);
+    chatArea.scrollTop = chatArea.scrollHeight;
+    return typingIndicator;
+}
+
+// Fungsi untuk menyembunyikan indikator mengetik
+function hideTypingIndicator(indicator) {
+    if (indicator) {
+        indicator.remove();
+    }
+}
+
+// Generate unique session ID
+function generateSessionId() {
+    return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+}
+
+// Fungsi untuk mengirim pesan
+async function sendMessage() {
+    const input = document.querySelector('.message-input');
+    const message = input.value.trim();
+    
+    if (message) {
+        addMessage(message, true);
+        input.value = '';
+        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
+        
+        const typingIndicator = showTypingIndicator();
+        
+        try {
+            // Get or create session ID
+            let sessionId = localStorage.getItem('chatSessionId');
+            if (!sessionId) {
+                sessionId = generateSessionId();
+                localStorage.setItem('chatSessionId', sessionId);
+            }
+
+            // Retrieve bidangBisnis from localStorage
+            const leadData = localStorage.getItem('leadData');
+            let bidangBisnis = '';
+            if (leadData) {
+                const data = JSON.parse(leadData);
+                bidangBisnis = data.bidangBisnis;
+            }
+            
+            const response = await fetch('https://bot.kediritechnopark.com/webhook/e4559efb-e624-478b-8d40-c287c7c203e7', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: message,
+                    sessionId: sessionId,
+                    bidangBisnis: bidangBisnis
+                })
+            });
+            
+            hideTypingIndicator(typingIndicator);
+            
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            
+            const data = await response.json();
+            
+            // Cek apakah ada balasan dari bot
+            if (data && data.output) {
+                addMessage(data.output, false);
+            } else {
+                addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
+            }
+            
+        } catch (error) {
+            hideTypingIndicator(typingIndicator);
+            console.error('Error sending message:', error);
+            addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
+        }
+    }
+}
+
+// Function to toggle attachment icons visibility
+function toggleAttachmentIcons(show) {
+    const icons = document.querySelector('.attachment-icons');
+    if (show) {
+        icons.style.opacity = '1';
+        icons.style.transform = 'translateY(-50%)';
+    } else {
+        icons.style.opacity = '0';
+        icons.style.transform = 'translateY(-50%) translateX(20px)';
+    }
+}
+
+// Event listener untuk tombol kirim
+document.querySelector('.send-btn').addEventListener('click', sendMessage);
+
+// Event listener untuk tombol Enter
+document.querySelector('.message-input').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        sendMessage();
+    }
+});
+
+// Event listener untuk input text
+const messageInput = document.querySelector('.message-input');
+messageInput.addEventListener('input', function() {
+    if (this.value.trim() !== '') {
+        toggleAttachmentIcons(false);
+    } else {
+        toggleAttachmentIcons(true);
+    }
+});
+
+// Handle virtual keyboard on mobile
+messageInput.addEventListener('focus', function() {
+    // Scroll input into view
+    setTimeout(() => {
+        this.scrollIntoView({behavior: 'smooth', block: 'end'});
+    }, 300);
+});
+
+// Initialize attachment icons
+document.addEventListener('DOMContentLoaded', () => {
+    toggleAttachmentIcons(true);
+    
+    // Handle initial scroll position
+    const chatArea = document.querySelector('.chat-area');
+    chatArea.scrollTop = chatArea.scrollHeight;
+});
+
+// Inisialisasi chat setelah DOM selesai dimuat
+document.addEventListener('DOMContentLoaded', () => {
+    // Simulate explanatory demo conversation
+    const simulateConversation = async () => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
+        
+        let typingIndicator = showTypingIndicator();
+        await new Promise(resolve => setTimeout(resolve, 2500));
+        hideTypingIndicator(typingIndicator);
+        addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
+        
+        await new Promise(resolve => setTimeout(resolve, 2500));
+        addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
+        
+        typingIndicator = showTypingIndicator();
+        await new Promise(resolve => setTimeout(resolve, 3500));
+        hideTypingIndicator(typingIndicator);
+        addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
+        
+        typingIndicator = showTypingIndicator();
+        await new Promise(resolve => setTimeout(resolve, 3500));
+        hideTypingIndicator(typingIndicator);
+        addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
+
+        typingIndicator = showTypingIndicator();
+        await new Promise(resolve => setTimeout(resolve, 2500));
+        hideTypingIndicator(typingIndicator);
+
+        // Retrieve bidangBisnis from localStorage
+        const leadData = localStorage.getItem('leadData');
+        let bidangBisnis = '';
+        if (leadData) {
+            const data = JSON.parse(leadData);
+            bidangBisnis = data.bidangBisnis;
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        addMessage(`Silakan gunakan demo ini untuk bertanya mengenai persoalan bisnis ${bidangBisnis} yang Anda pilih.`, false);
+    };
+    
+    simulateConversation();
+    
+    // Handle viewport height for mobile browsers
+    const setVh = () => {
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+    setVh();
+    window.addEventListener('resize', setVh);
+    window.addEventListener('load', setVh);
+    
+    const userName = document.querySelector('.user-details h2').textContent;
+    const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
+    document.querySelector('.avatar').textContent = userInitial;
+});
+
+// Pastikan animasi mengetik muncul sebelum pesan sambutan
+// (Sudah diimplementasikan di atas)
--- a/form-page/chat-page/style.css
+++ b/form-page/chat-page/style.css
@@ -11,12 +11,12 @@ body {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
-    background: linear-gradient(135deg, #0077b6, #023e8a);
+    background: #D4EBF8;
    padding: 20px;
 }

 .chat-container {
-    background: rgba(255, 255, 255, 0.2);
+    background: #219ebc;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
@@ -30,9 +30,10 @@ body {
    position: relative;
 }

+
 .chat-header {
    padding: 15px 20px;
-    background: rgba(255, 255, 255, 0.25);
+    background: #023047;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
@@ -41,18 +42,27 @@ body {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
-    z-index: 100;
-    flex-shrink: 0; /* Prevent header from shrinking */
+    z-index: 1000;
+    flex-shrink: 0;
 }

-.chat-header, .input-area {
-    background: rgba(173, 232, 244, 0.5);
+.input-area {
+    display: flex;
+    padding: 15px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    align-items: center;
+    gap: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: sticky;
+    bottom: 0;
+    z-index: 1000;
+    background: #023047;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.4);
-    z-index: 10;
 }

+
 .user-info {
    display: flex;
    align-items: center;
@@ -65,6 +75,10 @@ body {
    flex-direction: column;
 }

+.user-details > * {
+    color: #FFFFFF;
+}
+
 .user-role {
    font-size: 0.8rem;
    opacity: 0.7;
@@ -75,7 +89,7 @@ body {
    width: 50px;
    height: 50px;
    border-radius: 50%;
-    background: #0096c7;
+    background: #fb8500;
    color: white;
    display: flex;
    justify-content: center;
@@ -101,7 +115,7 @@ body {
    list-style: none;
    width: 20px;
    height: 20px;
-    background: rgba(72, 202, 228, 0.5);
+    background: #8ECDDD;
    animation: floating 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
@@ -235,15 +249,15 @@ body {

 .message.received {
    align-self: flex-start;
-    background: rgba(173, 232, 244, 0.8);
-    color: #03045e;
+    background: #caf0f8;
+    color: #333;
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(5px);
 }

 .message.sent {
    align-self: flex-end;
-    background: white;
+    background: #caf0f8;
    color: #03045e;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -252,7 +266,7 @@ body {
 .message-content {
    word-wrap: break-word;
    line-height: 1.4;
-    color: #001f3f; /* Navy blue text */
+    color: #003366; /* Navy blue text */
 }

 .message-time {
@@ -320,7 +334,7 @@ body {
 }

 .send-btn {
-    background: #0096c7;
+    background: #fb8500;
    border: none;
    border-radius: 12px;
    width: 50px; 
@@ -330,7 +344,7 @@ body {
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
-    box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4);
+    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
    flex-shrink: 0;
 }

@@ -397,14 +411,14 @@ body {
    width: 30px;
    height: 30px;
    border-radius: 50%;
-    background: #0096c7;
+    background: #fb8500;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Increase font size for icon */
    border: 2px solid white;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 5极客 rgba(0, 0, 0, 0.2);
    z-index: 5;
 }

@@ -439,7 +453,7 @@ body {
 .typing-indicator {
    display: flex;
    align-self: flex-start;
-    background: #f0f0f0;
+    background: #caf0f8;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 15px;
@@ -456,7 +470,7 @@ body {
    width: 6px;
    height: 6px;
    border-radius: 50%;
-    background: #48cae4;
+    background: #219ebc;
    margin: 0 2px;
 }

@@ -471,21 +485,3 @@ body {
 .typing-dots span:nth-child(3) {
    animation: wave 1.2s infinite 0.4s;
 }
-
-@media (max-width: 768px) {
-    body {
-        align-items: flex-start; /* Header menempel di atas */
-        padding: 0;
-    }
-    
-    .chat-container {
-        height: 100vh; /* Kembali ke viewport height normal */
-        max-height: none;
-        border-radius: 0;
-        margin-top: 0;
-    }
-    
-    .message {
-        max-width: 85%;
-    }
-}
--- a/form-page/index.html
+++ b/form-page/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Formulir Demo Mayagen</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+</head>
+<body>
+    <!-- Floating circles background -->
+    <ul class="floating-circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+    </ul>
+    <div class="form-container" id="form-section">
+        <form id="demo-form">
+            <h2>Mayagen Demo Gratis</h2>
+            <p>Silakan isi formulir di bawah ini untuk melanjutkan ke halaman demo.</p>
+            
+            <div class="input-group">
+                <i class="bi bi-person"></i>
+                <input type="text" id="nama" placeholder="Nama Lengkap / Perusahaan" required>
+            </div>
+            
+            <div class="input-group">
+                <i class="bi bi-envelope"></i>
+                <input type="email" id="email" placeholder="Alamat Email" required>
+            </div>
+            
+            <div class="input-group">
+                <i class="bi bi-phone"></i>
+                <input type="tel" id="nomor-hp" placeholder="Nomor HP" required>
+            </div>
+            
+            <div class="input-group">
+                <i class="bi bi-briefcase"></i>
+                <select id="bidang-bisnis" required>
+                    <option value="" disabled selected>Pilih Bidang Bisnis</option>
+                    <option value="E-commerce / Toko Online">E-commerce / Toko Online</option>
+                    <option value="Restoran / F&B">Restoran / F&B</option>
+                    <option value="Properti / Real Estate">Properti / Real Estate</option>
+                    <option value="Pendidikan / Kursus Online">Pendidikan / Kursus Online</option>
+                    <option value="Kesehatan / Klinik">Kesehatan / Klinik</option>
+                    <option value="Otomotif / Dealer">Otomotif / Dealer</option>
+                    <option value="Jasa Profesional">Jasa Profesional</option>
+                    <option value="Sewa Lapangan">Sewa Lapangan</option>
+                </select>
+            </div>
+            
+            <div class="input-group" id="other-bisnis-wrapper" style="display: none;">
+                <i class="bi bi-pencil"></i>
+                <input type="text" id="other-bidang-bisnis" placeholder="Masukkan Bidang Bisnis Anda">
+            </div>
+            
+            <button type="submit">Akses Demo</button>
+        </form>
+    </div>
+
+    <div class="chat-container" id="chat-section" style="display: none;">
+        <!-- Floating circles background -->
+        <ul class="floating-circles">
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+        
+        <!-- Header dengan avatar dan nama pengguna -->
+        <header class="chat-header">
+            <div class="user-info">
+                <div class="avatar">M</div>
+                <div class="user-details">
+                    <h2>Maya</h2>
+                    <span class="user-role">Virtual Assistant - Demo</span>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Area chat utama -->
+        <div class="chat-area">
+        </div>
+        
+        <!-- Input area with WhatsApp-like design -->
+        <div class="input-area">
+            <div class="input-wrapper">
+                <input type="text" class="message-input" placeholder="Ketik pesan...">
+                <div class="attachment-icons">
+                    <!-- Hanya ikon kamera yang tersisa -->
+                    <button class="icon-btn attachment-btn">
+                        <i class="bi bi-camera"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <button class="send-btn">
+                <i class="bi bi-arrow-right-circle"></i>
+            </button>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>
--- a/form-page/script.js
+++ b/form-page/script.js
@@ -0,0 +1,319 @@
+// Fungsi untuk menambahkan pesan baru ke area chat
+function addMessage(content, isSent) {
+    const chatArea = document.querySelector('.chat-area');
+    
+    // Buat elemen pesan
+    const message = document.createElement('div');
+    message.className = `message ${isSent ? 'sent' : 'received'}`;
+    
+    // Ambil inisial dari nama pengguna yang mengisi form, atau default 'M'
+    let userInitial = 'M';
+    const leadData = localStorage.getItem('leadData');
+    if (leadData) {
+        const data = JSON.parse(leadData);
+        if (data.nama) {
+            userInitial = data.nama.split(' ').map(n => n[0]).join('').substring(0, 1);
+        }
+    }
+
+    // Tambahkan avatar kecil untuk pesan masuk
+    if (!isSent) {
+        const smallAvatar = document.createElement('div');
+        smallAvatar.className = 'small-avatar';
+        smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
+        message.appendChild(smallAvatar);
+    } else {
+        // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
+        const personIcon = document.createElement('i');
+        personIcon.className = 'bi bi-person sent-user-icon';
+        message.appendChild(personIcon);
+    }
+    
+    // Tambahkan konten pesan
+    const messageContent = document.createElement('div');
+    messageContent.className = 'message-content';
+    messageContent.textContent = content;
+    
+    // Tambahkan waktu pesan
+    const now = new Date();
+    const time = now.getHours().toString().padStart(2, '0') + ':' + 
+                now.getMinutes().toString().padStart(2, '0');
+    
+    const messageTime = document.createElement('div');
+    messageTime.className = 'message-time';
+    messageTime.textContent = time;
+    
+    // Gabungkan semua elemen
+    message.appendChild(messageContent);
+    message.appendChild(messageTime);
+    
+    // Tambahkan ke area chat dengan animasi
+    chatArea.appendChild(message);
+    
+    // Scroll ke bawah untuk melihat pesan terbaru
+    chatArea.scrollTop = chatArea.scrollHeight;
+}
+
+// Fungsi untuk menampilkan indikator mengetik
+function showTypingIndicator() {
+    const chatArea = document.querySelector('.chat-area');
+    const typingIndicator = document.createElement('div');
+    typingIndicator.className = 'typing-indicator';
+    typingIndicator.innerHTML = `
+        <div class="typing-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    `;
+    chatArea.appendChild(typingIndicator);
+    chatArea.scrollTop = chatArea.scrollHeight;
+    return typingIndicator;
+}
+
+// Fungsi untuk menyembunyikan indikator mengetik
+function hideTypingIndicator(indicator) {
+    if (indicator) {
+        indicator.remove();
+    }
+}
+
+// Generate unique session ID
+function generateSessionId() {
+    return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+}
+
+// Fungsi untuk mengirim pesan
+async function sendMessage() {
+    const input = document.querySelector('.message-input');
+    const message = input.value.trim();
+    
+    if (message) {
+        addMessage(message, true);
+        input.value = '';
+        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
+        
+        const typingIndicator = showTypingIndicator();
+        
+        try {
+            // Get or create session ID
+            let sessionId = localStorage.getItem('chatSessionId');
+            if (!sessionId) {
+                sessionId = generateSessionId();
+                localStorage.setItem('chatSessionId', sessionId);
+            }
+            
+            const response = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: message,
+                    sessionId: sessionId
+                })
+            });
+            
+            hideTypingIndicator(typingIndicator);
+            
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            
+            const data = await response.json();
+            
+            // Cek apakah ada balasan dari bot
+            if (data && data.output) {
+                addMessage(data.output, false);
+            } else {
+                addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
+            }
+            
+        } catch (error) {
+            hideTypingIndicator(typingIndicator);
+            console.error('Error sending message:', error);
+            addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
+        }
+    }
+}
+
+// Function to toggle attachment icons visibility
+function toggleAttachmentIcons(show) {
+    const icons = document.querySelector('.attachment-icons');
+    if (icons) { // Check if icons element exists
+        if (show) {
+            icons.style.opacity = '1';
+            icons.style.transform = 'translateY(-50%)';
+        } else {
+            icons.style.opacity = '0';
+            icons.style.transform = 'translateY(-50%) translateX(20px)';
+        }
+    }
+}
+
+// Handle viewport height for mobile browsers
+const setVh = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+};
+
+// Simulate explanatory demo conversation
+const simulateConversation = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
+    
+    let typingIndicator = showTypingIndicator();
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    hideTypingIndicator(typingIndicator);
+    addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
+    
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
+    
+    typingIndicator = showTypingIndicator();
+    await new Promise(resolve => setTimeout(resolve, 3500));
+    hideTypingIndicator(typingIndicator);
+    addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
+    
+    typingIndicator = showTypingIndicator();
+    await new Promise(resolve => setTimeout(resolve, 3500));
+    hideTypingIndicator(typingIndicator);
+    addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
+
+    typingIndicator = showTypingIndicator();
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    hideTypingIndicator(typingIndicator);
+    addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false);
+
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    addMessage('Silakan bertanya mengenai fitur-fitur Mayagen yang relevan dengan bidang bisnis yang Anda pilih.', false);
+};
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    const formSection = document.getElementById('form-section');
+    const chatSection = document.getElementById('chat-section');
+    const bidangBisnisSelect = document.getElementById('bidang-bisnis');
+    const otherBisnisWrapper = document.getElementById('other-bisnis-wrapper');
+    const otherBidangBisnisInput = document.getElementById('other-bidang-bisnis');
+    const messageInput = document.querySelector('.message-input');
+    const sendButton = document.querySelector('.send-btn');
+
+    bidangBisnisSelect.addEventListener('change', function() {
+        if (this.value === 'other') {
+            otherBisnisWrapper.style.display = 'block';
+            otherBidangBisnisInput.required = true;
+        } else {
+            otherBisnisWrapper.style.display = 'none';
+            otherBidangBisnisInput.required = false;
+        }
+    });
+
+    document.getElementById('demo-form').addEventListener('submit', async function(event) {
+        event.preventDefault(); // Mencegah form dari submit default
+        
+        // Ambil data dari form
+        const nama = document.getElementById('nama').value;
+        const emailValue = document.getElementById('email').value;
+        let nomorHp = document.getElementById('nomor-hp').value;
+        let bidangBisnis = bidangBisnisSelect.value;
+
+        if (bidangBisnis === 'other') {
+            bidangBisnis = otherBidangBisnisInput.value;
+        }
+
+        // Format nomor HP
+        nomorHp = document.getElementById('nomor-hp').value;
+        if (nomorHp.startsWith('0')) {
+            nomorHp = '62' + nomorHp.slice(1);
+        }
+
+        // Validasi email
+        if (!isValidEmail(emailValue)) {
+            alert('Alamat email tidak valid.');
+            return;
+        }
+        
+        // Simpan data ke localStorage (untuk tujuan demo)
+        const leadData = {
+            nama: nama,
+            email: emailValue,
+            nomorHp: nomorHp,
+            bidangBisnis: bidangBisnis,
+            timestamp: new Date().toISOString()
+        };
+
+        // Kirim data ke webhook sebelum melanjutkan
+        try {
+            const webhookResponse = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(leadData)
+            });
+
+            if (!webhookResponse.ok) {
+                console.error('Webhook error:', webhookResponse.status, webhookResponse.statusText);
+                // Handle error appropriately, e.g., display a message to the user
+                alert('Terjadi kesalahan saat mengirim data ke server. Silakan coba lagi.');
+                return; // Prevent navigation to chat page
+            }
+
+            console.log('Webhook berhasil dikirim!');
+
+        } catch (error) {
+            console.error('Webhook error:', error);
+            // Handle error appropriately
+            alert('Tidak dapat terhubung ke server. Silakan coba lagi nanti.');
+            return; // Prevent navigation to chat page
+        }
+        
+        // Sembunyikan form dan tampilkan chat
+        formSection.style.display = 'none';
+        chatSection.style.display = 'flex'; // Use flex to maintain column layout
+
+        // Initialize chat functionality
+        setVh();
+        window.addEventListener('resize', setVh);
+        window.addEventListener('load', setVh);
+
+        toggleAttachmentIcons(true);
+        const chatArea = document.querySelector('.chat-area');
+        if (chatArea) {
+            chatArea.scrollTop = chatArea.scrollHeight;
+        }
+
+        // Add event listeners for chat
+        if (sendButton) {
+            sendButton.addEventListener('click', sendMessage);
+        }
+        if (messageInput) {
+            messageInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            messageInput.addEventListener('input', function() {
+                if (this.value.trim() !== '') {
+                    toggleAttachmentIcons(false);
+                } else {
+                    toggleAttachmentIcons(true);
+                }
+            });
+            messageInput.addEventListener('focus', function() {
+                setTimeout(() => {
+                    this.scrollIntoView({behavior: 'smooth', block: 'end'});
+                }, 300);
+            });
+        }
+
+        simulateConversation();
+    });
+});
+
+// Function to validate email format
+function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
--- a/form-page/style.css
+++ b/form-page/style.css
@@ -0,0 +1,870 @@
+/* General Styling */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #219ebc;
+    padding: 20px;
+}
+
+.chat-container {
+    background: #B0E2FF; /* Calm pastel blue background */
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 800px;
+    height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Form Container */
+.form-container {
+    background: rgba(255, 255, 255, 0.25); /* Frosted glass effect */
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
+    padding: 40px;
+    width: 100%;
+    max-width: 450px;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    position: relative;
+    z-index: 2;
+}
+
+h2 {
+    color: #003366; /* Dark blue for readability */
+    margin-bottom: 10px;
+    font-size: 28px;
+}
+
+p {
+    color: #004080; /* Dark blue for readability */
+    margin-bottom: 30px;
+    font-size: 16px;
+}
+
+/* Input Group */
+.input-group {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.input-group i {
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #aaa;
+    font-size: 18px;
+}
+
+input {
+    width: 100%;
+    padding: 15px 15px 15px 50px;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    background: white; /* Reverted to original color */
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: #6495ED;
+    box-shadow: 0 0 10px rgba(100, 149, 237, 0.3);
+}
+
+select {
+    width: 100%;
+    padding: 15px 15px 15px 50px;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    background: white;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaa' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 15px center;
+}
+
+/* Submit Button */
+button {
+    width: 100%;
+    padding: 15px;
+    background: #023047; /* Cornflower Blue */
+    border: none;
+    border-radius: 12px;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(100, 149, 237, 0.4);
+}
+
+button:hover {
+    background: #537ecf; /* Darker Cornflower Blue */
+    box-shadow: 0 8px 20px rgba(100, 149, 237, 0.5);
+    transform: translateY(-2px);
+}
+
+.floating-circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 31, 63, 0.6); /* Increased darkness for more contrast */
+    animation: floating 25s linear infinite;
+    bottom: -150px;
+    border-radius: 50%;
+}
+
+.floating-circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+    animation-duration: 20s;
+}
+
+.floating-circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 22s;
+}
+
+.floating-circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+    animation-duration: 18s;
+}
+
+.floating-circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 24s;
+}
+
+.floating-circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+    animation-duration: 16s;
+}
+
+.floating-circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+    animation-duration: 26s;
+}
+
+.floating-circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 30s;
+}
+
+.floating-circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.floating-circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.floating-circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 28s;
+}
+
+@keyframes floating {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+        opacity: 0.7;
+    }
+    25% {
+        transform: translate(-50px, -250px) rotate(90deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(50px, -500px) rotate(180deg);
+        opacity: 0.3;
+    }
+    75% {
+        transform: translate(-30px, -750px) rotate(270deg);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(0, -1000px) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+/* Chat-specific styles from chat-page/style.css */
+.chat-container {
+    background: rgba(255, 255, 255, 0.3); /* Slightly more transparent */
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 800px;
+    height: calc(var(--vh, 1vh) * 90); /* Menggunakan variabel viewport height */
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.chat-header {
+    padding: 15px 20px;
+    background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+    display: flex;
+    align-items: center;
+    border-radius: 20px 20px 0 0;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000; /* Increased z-index to ensure visibility */
+    flex-shrink: 0; /* Prevent header from shrinking */
+}
+
+.input-area {
+    display: flex;
+    padding: 15px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    align-items: center;
+    gap: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: sticky;
+    bottom: 0;
+    z-index: 1000; /* Increased z-index to ensure visibility */
+    background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+.chat-header, .input-area {
+    background: rgba(173, 216, 230, 0.7); /* Pastel blue transparent */
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    z-index: 10;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+}
+
+.user-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-role {
+    font-size: 0.8rem;
+    opacity: 0.7;
+    margin-top: 3px;
+}
+
+.avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #6495ED; /* Cornflower Blue */
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* Enhanced floating circles background */
+.floating-circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+.floating-circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(72, 202, 228, 0.5);
+    animation: floating 25s linear infinite;
+    bottom: -150px;
+    border-radius: 50%;
+    z-index: 1;
+    animation-fill-mode: both;
+}
+
+.floating-circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+    animation-duration: 20s;
+}
+
+.floating-circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 22s;
+}
+
+.floating-circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+    animation-duration: 18s;
+}
+
+.floating-circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 24s;
+}
+
+.floating-circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+    animation-duration: 16s;
+}
+
+.floating-circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+    animation-duration: 26s;
+}
+
+.floating-circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 30s;
+}
+
+.floating-circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.floating-circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.floating-circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 28s;
+}
+
+/* Enhanced floating animation with horizontal movement */
+@keyframes floating {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+        opacity: 0.7;
+    }
+    25% {
+        transform: translate(-50px, -250px) rotate(90deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(50px, -500px) rotate(180deg);
+        opacity: 0.3;
+    }
+    75% {
+        transform: translate(-30px, -750px) rotate(270deg);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(0, -1000px) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+.chat-area {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    position: relative;
+    background: transparent;
+}
+
+.message {
+    max-width: 70%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    position: relative;
+    animation: fadeIn 0.3s ease;
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.message.received {
+    align-self: flex-start;
+    background: rgba(200, 230, 255, 0.9); /* Light pastel blue */
+    color: #003366; /* Dark blue */
+    border-bottom-left-radius: 4px;
+    backdrop-filter: blur(5px);
+}
+
+.message.sent {
+    align-self: flex-end;
+    background: white;
+    color: #003366; /* Dark blue */
+    border-bottom-right-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.message-content {
+    word-wrap: break-word;
+    line-height: 1.4;
+    color: #003366; /* Dark blue text */
+}
+
+.message-time {
+    font-size: 0.7rem;
+    margin-top: 5px;
+    opacity: 0.7;
+    color: #004080; /* Dark blue text */
+}
+
+.message.sent .message-time {
+    text-align: left; /* Move to left for user bubble */
+}
+
+.message.received .message-time {
+    text-align: right;
+}
+
+.input-area {
+    display: flex;
+    padding: 15px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    align-items: center;
+    gap: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: sticky;
+    bottom: 0;
+    z-index: 100;
+}
+
+.input-wrapper {
+    flex-grow: 1;
+    position: relative;
+}
+
+.attachment-icons {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 5px;
+    transition: all 0.3s ease;
+}
+
+.message-input:not(:placeholder-shown) + .attachment-icons {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+    pointer-events: none;
+}
+
+.message-input {
+    flex-grow: 1;
+    padding: 12px 45px 12px 15px;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    background: white;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
+    width: 100%;
+}
+
+.message-input:focus {
+    outline: none; /* Remove focus outline */
+}
+
+.send-btn {
+    background: #FF9800; /* Orange color */
+    border: none;
+    border-radius: 12px;
+    width: 50px; 
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
+    flex-shrink: 0;
+}
+
+.input-area:focus-within {
+    box-shadow: 0 0 15px rgba(72, 202, 228, 0.6);
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.3s ease;
+}
+
+.icon-btn:hover {
+    background: rgba(0, 150, 199, 0.1);
+}
+
+.icon-btn .bi {
+    font-size: 24px;
+    color: #6a737d; /* Darker gray for better contrast */
+}
+
+.send-btn .bi {
+    font-size: 24px; /* Same as camera icon */
+    color: white;
+}
+
+.attachment-icons .icon-btn {
+    width: 40px;
+    height: 40px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes wave {
+    0%, 60%, 100% {
+        transform: scaleY(0.4);
+    }
+    30% {
+        transform: scaleY(1);
+    }
+}
+
+.small-avatar {
+    position: absolute;
+    bottom: -15px; /* Move to bottom */
+    left: 10px; /* Center horizontally */
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #6495ED; /* Cornflower Blue */
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px; /* Increase font size for icon */
+    border: 2px solid white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 5;
+}
+
+.message.received {
+    position: relative;
+    margin-top: 20px;
+    padding-top: 10px;
+}
+
+.message.sent {
+    position: relative;
+}
+
+.sent-user-icon {
+    position: absolute;
+    bottom: -15px; /* Move to bottom */
+    right: 10px; /* Align to right with some margin */
+    font-size: 24px;
+    color: #0096c7;
+    background: white;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 5;
+}
+
+.typing-indicator {
+    display: flex;
+    align-self: flex-start;
+    background: #f0f0f0;
+    padding: 10px 15px;
+    border-radius: 18px;
+    margin-bottom: 15px;
+}
+
+.typing-dots {
+    display: flex;
+    align-items: center;
+    height: 17px;
+}
+
+.typing-dots span {
+    display: block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #6495ED; /* Cornflower Blue */
+    margin: 0 2px;
+}
+
+.typing-dots span:nth-child(1) {
+    animation: wave 1.2s infinite;
+}
+
+.typing-dots span:nth-child(2) {
+    animation: wave 1.2s infinite 0.2s;
+}
+
+.typing-dots span:nth-child(3) {
+    animation: wave 1.2s infinite 0.4s;
+}
+
+@media (max-width: 768px) {
+    body {
+        align-items: center; /* Center vertically */
+        justify-content: center; /* Center horizontally */
+        padding: 0;
+    }
+
+    .form-container {
+        padding: 20px;
+        max-width: 90%; /* Adjust as needed */
+        border-radius: 12px;
+        height: auto;
+        margin: 0 auto; /* Center horizontally */
+    }
+    
+    .chat-container {
+        height: calc(var(--vh, 1vh) * 90); /* Revert to original height */
+        max-height: 800px;
+        border-radius: 12px;
+        margin: 20px auto; /* Center horizontally and add some top margin */
+        max-width: 90%; /* Adjust as needed */
+    }
+    
+    .message {
+        max-width: 85%;
+    }
+}
+
+/* Enhanced floating circles background */
+.floating-circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.floating-circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    animation: floating 25s linear infinite;
+    bottom: -150px;
+    border-radius: 50%;
+}
+
+.floating-circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+    animation-duration: 20s;
+}
+
+.floating-circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 22s;
+}
+
+.floating-circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+    animation-duration: 18s;
+}
+
+.floating-circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 24s;
+}
+
+.floating-circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+    animation-duration: 16s;
+}
+
+.floating-circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+    animation-duration: 26s;
+}
+
+.floating-circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 30s;
+}
+
+.floating-circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.floating-circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.floating-circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 28s;
+}
+
+@keyframes floating {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+        opacity: 0.7;
+    }
+    25% {
+        transform: translate(-50px, -250px) rotate(90deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(50px, -500px) rotate(180deg);
+        opacity: 0.3;
+    }
+    75% {
+        transform: translate(-30px, -750px) rotate(270deg);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(0, -1000px) rotate(360deg);
+        opacity: 0;
+    }
+}