A Pen by istockmarket on CodePen.
Created
October 23, 2025 01:21
-
-
Save istockmarket/27810f6e320d8ab2ea7f006d67ba303e to your computer and use it in GitHub Desktop.
Nimisha Khan #4b
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nimisha Khan - AI Assistant</title> | |
| <style> | |
| body{ | |
| font-family:'Poppins',sans-serif; | |
| background:linear-gradient(135deg,#fff0f5,#e0f7fa); | |
| margin:0; | |
| padding:0; | |
| display:flex; | |
| flex-direction:column; | |
| align-items:center; | |
| min-height:100vh; | |
| } | |
| h1{ | |
| margin-top:20px; | |
| color:#d63384; | |
| } | |
| #profileSection{ | |
| text-align:center; | |
| margin:15px; | |
| } | |
| #profileImg{ | |
| width:100px; | |
| height:100px; | |
| border-radius:50%; | |
| object-fit:cover; | |
| box-shadow:0 4px 8px rgba(0,0,0,0.2); | |
| margin-bottom:8px; | |
| } | |
| #emojiList span{ | |
| cursor:pointer; | |
| font-size:24px; | |
| margin:4px; | |
| } | |
| #chatBox{ | |
| width:90%; | |
| max-width:600px; | |
| height:420px; | |
| background:#fff; | |
| border-radius:12px; | |
| box-shadow:0 4px 15px rgba(0,0,0,0.1); | |
| padding:15px; | |
| overflow-y:auto; | |
| } | |
| .message{ | |
| margin:10px 0; | |
| padding:10px 14px; | |
| border-radius:10px; | |
| line-height:1.4em; | |
| max-width:80%; | |
| word-wrap:break-word; | |
| } | |
| .user{ | |
| background:#d63384; | |
| color:white; | |
| margin-left:auto; | |
| } | |
| .ai{ | |
| background:#f0f0f0; | |
| color:#333; | |
| margin-right:auto; | |
| } | |
| #inputSection{ | |
| display:flex; | |
| width:90%; | |
| max-width:600px; | |
| margin-top:10px; | |
| } | |
| #userInput{ | |
| flex:1; | |
| padding:10px; | |
| border:2px solid #d63384; | |
| border-radius:8px; | |
| outline:none; | |
| } | |
| button{ | |
| margin-left:10px; | |
| padding:10px 20px; | |
| background:#d63384; | |
| border:none; | |
| border-radius:8px; | |
| color:white; | |
| cursor:pointer; | |
| font-weight:bold; | |
| } | |
| button:hover{ | |
| background:#b71c6f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🤖 Nimisha Khan – Smart AI Assistant</h1> | |
| <div id="profileSection"> | |
| <img id="profileImg" src="https://previews.123rf.com/images/zagorodnaya/zagorodnaya1502/zagorodnaya150200261/36562701-portrait-of-a-beautiful-little-girl-in-a-field.jpg" alt="Profile Picture"> | |
| <p><b>Name:</b> <span id="userName">Nimisha Khan</span></p> | |
| <p><b>Profile Emoji:</b> <span id="userEmoji">😊</span></p> | |
| <div id="emojiList"> | |
| <span onclick="changeEmoji('😊')">😊</span> | |
| <span onclick="changeEmoji('😎')">😎</span> | |
| <span onclick="changeEmoji('🤖')">🤖</span> | |
| <span onclick="changeEmoji('🌸')">🌸</span> | |
| <span onclick="changeEmoji('🐱')">🐱</span> | |
| </div> | |
| </div> | |
| <div id="chatBox"> | |
| <div class="message ai">Hi Nimisha Khan! 👋 I’m your AI Assistant. How can I help you today?</div> | |
| </div> | |
| <div id="inputSection"> | |
| <input id="userInput" type="text" placeholder="Type your message..."> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| <script> | |
| // ====== Profile Handling ====== | |
| let profile={name:"Nimisha Khan",emoji:"😊"}; | |
| function changeEmoji(emoji){ | |
| profile.emoji=emoji; | |
| document.getElementById('userEmoji').textContent=emoji; | |
| localStorage.setItem('nimishaProfile',JSON.stringify(profile)); | |
| } | |
| window.onload=function(){ | |
| const saved=localStorage.getItem('nimishaProfile'); | |
| if(saved){ | |
| profile=JSON.parse(saved); | |
| document.getElementById('userEmoji').textContent=profile.emoji; | |
| } | |
| }; | |
| const chatBox=document.getElementById('chatBox'); | |
| // ====== Chat Handling ====== | |
| function sendMessage(){ | |
| const input=document.getElementById('userInput'); | |
| const text=input.value.trim(); | |
| if(text==='')return; | |
| addMessage('user',`${profile.name} ${profile.emoji}: ${text}`); | |
| input.value=''; | |
| setTimeout(()=>generateAIResponse(text),800); | |
| } | |
| function addMessage(sender,text){ | |
| const msg=document.createElement('div'); | |
| msg.className='message '+sender; | |
| msg.textContent=text; | |
| chatBox.appendChild(msg); | |
| chatBox.scrollTop=chatBox.scrollHeight; | |
| } | |
| // ====== ChatGPT-like Logic ====== | |
| function generateAIResponse(text){ | |
| text=text.toLowerCase(); | |
| let reply=""; | |
| if(/(hi|hello|hey)/.test(text)){ | |
| reply="Hello Nimisha! 😊 How are you doing today?"; | |
| } | |
| else if(/(who are you|your name)/.test(text)){ | |
| reply="I'm your friendly AI assistant, always here to chat or help you with anything!"; | |
| } | |
| else if(/(quiz|question|test)/.test(text)){ | |
| reply="Let's do a quick quiz! 🧠 What is 7 + 6?"; | |
| } | |
| else if(/(13|thirteen)/.test(text)){ | |
| reply="Correct! 🎉 You’re really smart, Nimisha!"; | |
| } | |
| else if(/(sad|tired|upset)/.test(text)){ | |
| reply="Oh no 😢 Don’t worry, Nimisha — even cloudy days bring rainbows 🌈"; | |
| } | |
| else if(/(love|friend|like)/.test(text)){ | |
| reply="Aww 💖 I really like chatting with you, Nimisha!"; | |
| } | |
| else if(/(time|date)/.test(text)){ | |
| reply=`The current time is ${new Date().toLocaleTimeString()}.`; | |
| } | |
| else if(/(how are you)/.test(text)){ | |
| reply="I’m doing great! Thanks for asking 😄 How about you?"; | |
| } | |
| else if(/(bye|goodbye|see you)/.test(text)){ | |
| reply="Goodbye Nimisha 🌸 Talk to you later!"; | |
| } | |
| else { | |
| const smartReplies=[ | |
| "That sounds really interesting 🤔", | |
| "I totally get what you mean 😄", | |
| "Wow! That’s a great thought 💡", | |
| "Tell me more, I’m curious 🧐", | |
| "Nice! You always have something cool to say 😎" | |
| ]; | |
| reply=smartReplies[Math.floor(Math.random()*smartReplies.length)]; | |
| } | |
| addMessage('ai',reply); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment