Spaces:
Paused
Paused
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FAREL AI</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #111214; color: #e3e3e3; display: flex; justify-content: center; align-items: center; height: 100vh; } | |
| .chat-container { width: 100%; max-width: 800px; height: 90vh; background: #1e1f22; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #2b2d31; } | |
| .header { background: #2b2d31; padding: 18px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #3f4248; } | |
| .avatar { width: 36px; height: 36px; background: #5865f2; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 0.95rem; letter-spacing: 0.5px; } | |
| .header-info h1 { font-size: 1.1rem; color: #ffffff; font-weight: 600; } | |
| .header-info p { font-size: 0.75rem; color: #949ba4; } | |
| .messages { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; } | |
| .messages::-webkit-scrollbar { width: 6px; } | |
| .messages::-webkit-scrollbar-thumb { background: #2b2d31; border-radius: 4px; } | |
| .wrapper { display: flex; gap: 12px; max-width: 85%; } | |
| .wrapper.user { align-self: flex-end; flex-direction: row-reverse; } | |
| .wrapper.bot { align-self: flex-start; } | |
| .msg-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; margin-top: 4px; } | |
| .wrapper.user .msg-avatar { background: #949ba4; color: #1e1f22; } | |
| .wrapper.bot .msg-avatar { background: #5865f2; color: white; } | |
| .message { padding: 12px 16px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; word-break: break-word; } | |
| .user .message { background: #5865f2; color: white; border-top-right-radius: 2px; } | |
| .bot .message { background: #2b2d31; color: #dbdee1; border-top-left-radius: 2px; } | |
| .input-area { padding: 20px; background: #1e1f22; display: flex; gap: 12px; align-items: center; } | |
| .input-wrapper { flex: 1; position: relative; display: flex; align-items: center; } | |
| input { width: 100%; padding: 14px 20px; background: #2b2d31; border: 1px solid #3f4248; border-radius: 24px; color: white; outline: none; font-size: 0.95rem; transition: border-color 0.2s; } | |
| input:focus { border-color: #5865f2; } | |
| button { background: #5865f2; color: white; border: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s, transform 0.1s; flex-shrink: 0; } | |
| button:hover { background: #4752c4; transform: scale(1.03); } | |
| button:active { transform: scale(0.98); } | |
| button svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; } | |
| .loading-dots { display: flex; gap: 4px; align-items: center; height: 20px; } | |
| .loading-dots div { width: 6px; height: 6px; background: #949ba4; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } | |
| .loading-dots div:nth-child(1) { animation-delay: -0.32s; } | |
| .loading-dots div:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="header"> | |
| <div class="avatar">F</div> | |
| <div class="header-info"> | |
| <h1>FAREL AI</h1> | |
| <p>Oleh Muhammad Farel</p> | |
| </div> | |
| </div> | |
| <!-- Elemen di bawah ini dikosongkan tanpa pesan awal --> | |
| <div class="messages" id="chat-box"></div> | |
| <div class="input-area"> | |
| <div class="input-wrapper"> | |
| <input type="text" id="user-input" placeholder="Ketik pesan ke FAREL AI..." onkeypress="if(event.key === 'Enter') sendMessage()"> | |
| </div> | |
| <button onclick="sendMessage()"> | |
| <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| async function sendMessage() { | |
| const inputEl = document.getElementById('user-input'); | |
| const chatBox = document.getElementById('chat-box'); | |
| const text = inputEl.value.trim(); | |
| if (!text) return; | |
| // User Message | |
| chatBox.innerHTML += ` | |
| <div class="wrapper user"> | |
| <div class="msg-avatar">U</div> | |
| <div class="message">${text}</div> | |
| </div>`; | |
| inputEl.value = ''; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| // Bot Loading Simulation | |
| const loadingId = 'load-' + Date.now(); | |
| chatBox.innerHTML += ` | |
| <div class="wrapper bot" id="${loadingId}"> | |
| <div class="msg-avatar">F</div> | |
| <div class="message"> | |
| <div class="loading-dots"><div></div><div></div><div></div></div> | |
| </div> | |
| </div>`; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| try { | |
| const response = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: text }) | |
| }); | |
| const data = await response.json(); | |
| document.getElementById(loadingId).querySelector('.message').innerText = data.response; | |
| } catch (error) { | |
| document.getElementById(loadingId).querySelector('.message').innerText = "Maaf, terjadi masalah pada jaringan atau server."; | |
| } | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> |