made a pixelated interface with catppuccin styling.

script.js

@@ -0,0 +1,97 @@
+const welcomeScreen = document.getElementById("welcomeScreen");
+const chatScreen = document.getElementById("chatScreen");
+const chatMessages = document.getElementById("chatMessages");
+const welcomeInput = document.getElementById("welcomeInput");
+const chatInput = document.getElementById("chatInput");
+
+let isInChat = false;
+
+function switchToChat() {
+  welcomeScreen.classList.add("hidden");
+  chatScreen.classList.remove("hidden");
+  chatInput.focus();
+  isInChat = true;
+}
+
+function addMessage(text, type = "user") {
+  const msg = document.createElement("div");
+  msg.className = `message ${type}`;
+  msg.innerHTML = `<div class="message-text">${escapeHtml(text)}</div>`;
+  chatMessages.appendChild(msg);
+  scrollToBottom();
+}
+
+function showTyping() {
+  const typing = document.createElement("div");
+  typing.className = "message assistant";
+  typing.id = "typing";
+  typing.innerHTML = `
+        <div class="message-text">
+            <div class="typing">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    `;
+  chatMessages.appendChild(typing);
+  scrollToBottom();
+}
+
+function hideTyping() {
+  const typing = document.getElementById("typing");
+  if (typing) typing.remove();
+}
+
+function scrollToBottom() {
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function sendMessage(text) {
+  if (!text.trim()) return;
+
+  if (!isInChat) {
+    switchToChat();
+  }
+
+  addMessage(text, "user");
+  chatInput.value = "";
+  chatInput.disabled = true;
+
+  showTyping();
+
+  setTimeout(() => {
+    hideTyping();
+    addMessage(
+      "I'm DevDen - your AI assistant. Soon I'll be connected to your knowledge base!",
+      "assistant",
+    );
+    chatInput.disabled = false;
+    chatInput.focus();
+  }, 1000);
+}
+
+// Welcome screen input handler
+welcomeInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    const text = welcomeInput.value.trim();
+    if (text) {
+      sendMessage(text);
+    }
+  }
+});
+
+// Chat input handler
+chatInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    sendMessage(chatInput.value);
+  }
+});