storm-hadi

byHadi Setiawan

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HADI - AI Pintar</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: #0b0f19; color: #e2e8f0; display: flex; flex-direction: column; height: 100vh; } /* Header */ header { background: #111827; padding: 15px; text-align: center; border-bottom: 2px solid #1f2937; } header h1 { font-size: 20px; color: #38bdf8; font-weight: 700; letter-spacing: 0.5px; } header p { font-size: 11px; color: #9ca3af; margin-top: 2px; } /* Chat Box */ .chat-container { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; } /* Bubble Chat HADI */ .hadi { align-self: flex-start; background: #1f2937; color: #f3f4f6; border-bottom-left-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Bubble Chat User */ .user { align-self: flex-end; background: #0284c7; color: #ffffff; border-bottom-right-radius: 4px; box-shadow: 0 2px 4px rgba(2,132,199,0.2); } /* Input Area */ .input-container { display: flex; padding: 12px; background: #111827; border-top: 2px solid #1f2937; gap: 8px; } input { flex: 1; padding: 12px 16px; border-radius: 24px; border: 1px solid #374151; background: #1f2937; color: white; outline: none; font-size: 14px; transition: border 0.2s; } input:focus { border-color: #38bdf8; } button { padding: 0 20px; border: none; background: #0284c7; color: white; border-radius: 24px; font-weight: bold; cursor: pointer; font-size: 14px; transition: background 0.2s; } button:active { background: #0369a1; } </style> </head> <body> <header> <h1>HADI</h1> <p>Asisten AI Pintar Anda</p> </header> <div class="chat-container" id="chatBox"> <div class="bubble hadi">Halo! Saya <strong>HADI</strong>, asisten AI pintar Anda. Ada yang bisa saya bantu atau selesaikan hari ini?</div> </div> <div class="input-container"> <input type="text" id="userInput" placeholder="Tanya HADI sesuatu..." autocomplete="off" onkeypress="handleKeyPress(event)" /> <button onclick="sendMessage()">Kirim</button> </div> <script> const chatBox = document.getElementById('chatBox'); const userInput = document.getElementById('userInput'); function handleKeyPress(event) { if (event.key === 'Enter') { sendMessage(); } } function sendMessage() { const text = userInput.value.trim(); if (!text) return; // Tampilkan pesan user appendMessage(text, 'user'); userInput.value = ''; // Efek mengetik simulasi dari HADI setTimeout(() => { const replyText = `HADI sedang memproses pertanyaan Anda tentang "${text}". Fitur pintar saya siap membantu Anda!`; appendMessage(replyText, 'hadi'); }, 700); } function appendMessage(text, sender) { const bubble = document.createElement('div'); bubble.className = `bubble ${sender}`; bubble.innerHTML = text; chatBox.appendChild(bubble); chatBox.scrollTop = chatBox.scrollHeight; } </script> </body> </html>