A Pen by istockmarket on CodePen.
Created
October 23, 2025 01:39
-
-
Save istockmarket/582193ac00b7dc9712bdf703790a3408 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> |
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
| let profile={name:"Nimisha Khan",emoji:"😊"}; | |
| const chatBox=document.getElementById('chatBox'); | |
| // ====== Profile 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; | |
| } | |
| // Load previous chats | |
| const savedChats = JSON.parse(localStorage.getItem('nimishaChats') || "[]"); | |
| savedChats.forEach(c => addMessage(c.sender, c.text)); | |
| document.getElementById('userInput').focus(); | |
| }; | |
| // ====== Chat Functions ====== | |
| 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),700); | |
| } | |
| function addMessage(sender,text){ | |
| const msg=document.createElement('div'); | |
| msg.className='message '+sender; | |
| msg.textContent=text; | |
| chatBox.appendChild(msg); | |
| chatBox.scrollTop=chatBox.scrollHeight; | |
| // Save chat | |
| let chats = JSON.parse(localStorage.getItem('nimishaChats') || "[]"); | |
| chats.push({sender,text}); | |
| localStorage.setItem('nimishaChats',JSON.stringify(chats)); | |
| } | |
| // ====== AI Speak ====== | |
| function speak(text){ | |
| const synth=window.speechSynthesis; | |
| const utter=new SpeechSynthesisUtterance(text); | |
| utter.pitch=1; | |
| utter.rate=1; | |
| utter.voice=synth.getVoices().find(v=>v.lang.startsWith('en'))||null; | |
| synth.speak(utter); | |
| } | |
| // ====== AI Chat Logic ====== | |
| function generateAIResponse(text){ | |
| text=text.toLowerCase(); | |
| let reply=""; | |
| if(/(hi|hello|hey)/.test(text)) reply="Hello Nimisha! 😊 How are you feeling today?"; | |
| else if(/(who are you|your name)/.test(text)) reply="I'm your talking AI friend! I can chat, listen, and make your day brighter."; | |
| else if(/(quiz|question|test)/.test(text)) reply="Let’s do a quick quiz! 🧠 What is the capital of France?"; | |
| else if(/(paris)/.test(text)) reply="Exactly! 🗼 Paris is the capital of France. Smart answer, Nimisha!"; | |
| else if(/(sad|tired|upset)/.test(text)) reply="I’m here for you 💖. Remember, even tough days end with a sunset."; | |
| else if(/(love|friend|like)/.test(text)) reply="Aww 💕 I love being your friend, 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 feeling amazing today! Thank you for asking 😊"; | |
| else if(/(bye|goodbye|see you)/.test(text)) reply="Goodbye Nimisha 🌸 I’ll be here whenever you need me!"; | |
| else { | |
| const smartReplies=[ | |
| "That’s really interesting 🤔", | |
| "Wow! I didn’t think about it that way 😄", | |
| "Tell me more, I love hearing your thoughts 💭", | |
| "You always say such cool things 😎", | |
| "Nice! Keep sharing your ideas 💡" | |
| ]; | |
| reply=smartReplies[Math.floor(Math.random()*smartReplies.length)]; | |
| } | |
| addMessage('ai',reply); | |
| speak(reply); | |
| } | |
| // ====== Voice Input ====== | |
| function startListening(){ | |
| if(!('webkitSpeechRecognition' in window)){ | |
| alert("Sorry, your browser doesn't support voice input."); | |
| return; | |
| } | |
| const recognition=new webkitSpeechRecognition(); | |
| recognition.lang='en-US'; | |
| recognition.interimResults=false; | |
| recognition.maxAlternatives=1; | |
| recognition.start(); | |
| recognition.onresult=function(event){ | |
| const voiceText=event.results[0][0].transcript; | |
| document.getElementById('userInput').value=voiceText; | |
| sendMessage(); | |
| }; | |
| recognition.onerror=function(event){ | |
| console.error("Voice recognition error:",event.error); | |
| }; | |
| } | |
| // ====== Press Enter to send ====== | |
| document.getElementById('userInput').addEventListener('keypress', function(e){ | |
| if(e.key === 'Enter') sendMessage(); | |
| }); |
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
| 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; | |
| scroll-behavior: smooth; | |
| } | |
| .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 15px; | |
| background:#d63384; | |
| border:none; | |
| border-radius:8px; | |
| color:white; | |
| cursor:pointer; | |
| font-weight:bold; | |
| } | |
| button:hover{ | |
| background:#b71c6f; | |
| } | |
| #micButton{ | |
| background:#4caf50; | |
| } | |
| #micButton:hover{ | |
| background:#3e8e41; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment