feat: Add initial chat page UI

This commit introduces a new, self-contained chat page, including the necessary HTML, CSS, and JavaScript files.

The page features a modern, responsive design with a glassmorphism effect on the main chat container, a gradient background with animated floating circles, and a clear layout for displaying sent and received messages.

- `index.html`: Defines the structure for the header, message area, and input form.
- `style.css`: Provides the visual styling, including the glass effect, message bubbles, and responsive adjustments.
- `script.js`: Contains the initial client-side logic for adding messages to the chat.

chat-page/script.js

@@ -0,0 +1,126 @@
+// 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'}`;
+    
+    // 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();
+    }
+}
+
+// Setup Intersection Observer untuk efek fade-out
+function setupMessageObserver() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (!entry.isIntersecting) {
+                // Ketika elemen keluar dari viewport
+                entry.target.style.opacity = '0.3';
+                entry.target.style.transform = 'translateY(10px)';
+            } else {
+                // Ketika elemen masuk ke viewport
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, {
+        threshold: 0.1 // Trigger ketika 10% elemen masih terlihat
+    });
+
+    // Terapkan observer ke semua pesan
+    document.querySelectorAll('.message').forEach(message => {
+        observer.observe(message);
+    });
+}
+
+// Fungsi untuk mengirim pesan
+function sendMessage() {
+    const input = document.querySelector('.message-input');
+    const message = input.value.trim();
+    
+    if (message) {
+        addMessage(message, true);
+        input.value = '';
+        
+        // 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);
+    }
+}
+
+// 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();
+    }
+});
+
+// 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);
+    
+    setupMessageObserver();
+});