Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RGB Bot</title> | |
| <style> | |
| :root { | |
| --bg-color: #0d0d0d; | |
| --text-color: #e0e0e0; | |
| --accent-color: #00ff00; /* Green typical of terminal/RGB */ | |
| --input-bg: #1a1a1a; | |
| --bot-msg-bg: #2a2a2a; | |
| --user-msg-bg: #004400; | |
| } | |
| body { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* RGB Border Effect */ | |
| body::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; height: 3px; | |
| background: linear-gradient(90deg, red, green, blue); | |
| z-index: 1000; | |
| } | |
| header { | |
| padding: 20px; | |
| text-align: center; | |
| border-bottom: 1px solid #333; | |
| background: rgba(0,0,0,0.8); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.1); | |
| } | |
| #chat-container { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| scroll-behavior: smooth; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: 8px; | |
| line-height: 1.5; | |
| position: relative; | |
| word-wrap: break-word; | |
| } | |
| .bot-message { | |
| align-self: flex-start; | |
| background-color: var(--bot-msg-bg); | |
| border-left: 3px solid #00f; | |
| box-shadow: 0 0 10px rgba(0, 0, 255, 0.2); | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: var(--user-msg-bg); | |
| border-right: 3px solid #0f0; | |
| box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); | |
| } | |
| .input-area { | |
| padding: 20px; | |
| background-color: #111; | |
| border-top: 1px solid #333; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| input[type="text"] { | |
| flex: 1; | |
| padding: 15px; | |
| background-color: var(--input-bg); | |
| border: 1px solid #333; | |
| color: white; | |
| border-radius: 4px; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| input[type="text"]:focus { | |
| border-color: var(--accent-color); | |
| box-shadow: 0 0 8px rgba(0, 255, 0, 0.1); | |
| } | |
| button { | |
| padding: 10px 25px; | |
| background: linear-gradient(45deg, #0000aa, #00aa00); | |
| border: none; | |
| color: white; | |
| font-weight: bold; | |
| font-family: inherit; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: transform 0.1s; | |
| } | |
| button:active { | |
| transform: scale(0.98); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #111; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #333; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0% { opacity: 0; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Peronal Assistant</h1> | |
| </header> | |
| <div id="chat-container"> | |
| <div class="message bot-message"> | |
| Hello! I'm Sagar's personal assistant. Feel free to ask me anything about Sagar. | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <input type="text" id="user-input" placeholder="Type your question..." autocomplete="off"> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| <script> | |
| const inputField = document.getElementById("user-input"); | |
| const chatContainer = document.getElementById("chat-container"); | |
| inputField.addEventListener("keypress", function(event) { | |
| if (event.key === "Enter") { | |
| sendMessage(); | |
| } | |
| }); | |
| async function sendMessage() { | |
| const text = inputField.value.trim(); | |
| if (!text) return; | |
| // Add User Message | |
| addMessage(text, "user-message"); | |
| inputField.value = ""; | |
| // Add Loading Indicator | |
| const loadingId = "loading-" + Date.now(); | |
| addMessage("Thinking", "bot-message typing-indicator", loadingId); | |
| try { | |
| const response = await fetch("/chat", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ message: text }) | |
| }); | |
| const data = await response.json(); | |
| // Remove loading | |
| const loadingElement = document.getElementById(loadingId); | |
| if (loadingElement) loadingElement.remove(); | |
| // Add Bot Response | |
| addMessage(data.answer, "bot-message"); | |
| } catch (error) { | |
| console.error("Error:", error); | |
| const loadingElement = document.getElementById(loadingId); | |
| if (loadingElement) loadingElement.remove(); | |
| addMessage("Error connecting to server.", "bot-message"); | |
| } | |
| } | |
| function addMessage(text, className, id = null) { | |
| const div = document.createElement("div"); | |
| div.className = "message " + className; | |
| div.innerText = text; | |
| if (id) div.id = id; | |
| chatContainer.appendChild(div); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> | |