diff --git a/projects/intellichat/index.html b/projects/intellichat/index.html new file mode 100644 index 000000000..49ae2d435 --- /dev/null +++ b/projects/intellichat/index.html @@ -0,0 +1,28 @@ + + + + + +IntelliChat + + + + +
+ +
+

IntelliChat

+
+ +
+ +
+ + +
+ +
+ + + + diff --git a/projects/intellichat/script.js b/projects/intellichat/script.js new file mode 100644 index 000000000..14e220d41 --- /dev/null +++ b/projects/intellichat/script.js @@ -0,0 +1,59 @@ +const chatBox = document.getElementById("chatBox"); +const userInput = document.getElementById("userInput"); +const sendBtn = document.getElementById("sendBtn"); + +let messages = []; + +sendBtn.addEventListener("click", sendMessage); +userInput.addEventListener("keypress", e=>{ +if(e.key==="Enter") sendMessage(); +}); + +function sendMessage(){ +const text = userInput.value.trim(); +if(!text) return; + +addMessage(text,"user"); +userInput.value=""; + +setTimeout(()=>{ +botReply(text); +},500); +} + +function addMessage(text,type){ +const msg = document.createElement("div"); +msg.classList.add("message",type); +msg.textContent=text; +chatBox.appendChild(msg); +chatBox.scrollTop=chatBox.scrollHeight; + +messages.push({type,text}); +} + +function botReply(userText){ +const response = generateFakeResponse(userText); +typeEffect(response); +} + +function generateFakeResponse(input){ +return "AI Response: I understand your message about \""+input+"\". This is a simulated intelligent reply."; +} + +function typeEffect(text){ +let index=0; +const msg = document.createElement("div"); +msg.classList.add("message","bot"); +chatBox.appendChild(msg); + +const interval = setInterval(()=>{ +msg.textContent += text[index]; +index++; +chatBox.scrollTop=chatBox.scrollHeight; + +if(index>=text.length){ +clearInterval(interval); +messages.push({type:"bot",text}); +} +},20); +} diff --git a/projects/intellichat/style.css b/projects/intellichat/style.css new file mode 100644 index 000000000..9323b93bb --- /dev/null +++ b/projects/intellichat/style.css @@ -0,0 +1,83 @@ +*{ +margin:0; +padding:0; +box-sizing:border-box; +font-family:Arial, sans-serif; +} + +body{ +background:#0f172a; +display:flex; +justify-content:center; +align-items:center; +height:100vh; +color:white; +} + +.chat-container{ +width:90%; +max-width:600px; +height:80vh; +background:#1e293b; +display:flex; +flex-direction:column; +border-radius:12px; +overflow:hidden; +} + +header{ +padding:15px; +background:#111827; +text-align:center; +font-weight:bold; +} + +.chat-box{ +flex:1; +padding:15px; +overflow-y:auto; +display:flex; +flex-direction:column; +gap:10px; +} + +.message{ +padding:10px 15px; +border-radius:12px; +max-width:75%; +} + +.user{ +align-self:flex-end; +background:#38bdf8; +color:black; +} + +.bot{ +align-self:flex-start; +background:#334155; +} + +.input-area{ +display:flex; +padding:10px; +background:#111827; +} + +input{ +flex:1; +padding:10px; +border:none; +border-radius:6px; +outline:none; +} + +button{ +margin-left:10px; +padding:10px 15px; +border:none; +border-radius:6px; +background:#38bdf8; +cursor:pointer; +font-weight:bold; +}