!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Chat App 💬</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
body {
background: linear-gradient(135deg, #6a11cb, #2575fc);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
.chat-container {
width: 380px;
height: 600px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
.chat-header {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
font-size: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
.chat-box {
flex: 1;
padding: 15px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
.message {
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
line-height: 1.4;
animation: fadeIn 0.3s ease;
.user-message {
align-self: flex-end;
background: #2575fc;
color: white;
border-bottom-right-radius: 2px;
.bot-message {
align-self: flex-start;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border-bottom-left-radius: 2px;
.chat-input {
display: flex;
border-top: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
.chat-input input {
flex: 1;
padding: 14px;
border: none;
outline: none;
background: transparent;
color: #fff;
font-size: 15px;
.chat-input button {
background: #6a11cb;
border: none;
padding: 0 18px;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: 0.3s;
.chat-input button:hover {
background: #2575fc;
.chat-box::-webkit-scrollbar {
width: 6px;
.chat-box::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">AI Chat Assistant 🤖</div>
<div class="chat-box" id="chatBox">
<div class="bot-message message">Hi there! 👋 How can I help you today?</div>
</div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="Type a message..." />
<button onclick="sendMessage()">➤</button>
</div>
</div>
<script>
const chatBox = [Link]("chatBox");
const userInput = [Link]("userInput");
function sendMessage() {
const userText = [Link]();
if (userText === "") return;
const userMessage = [Link]("div");
[Link]("message", "user-message");
[Link] = userText;
[Link](userMessage);
[Link] = [Link];
[Link] = "";
setTimeout(() => {
const botReply = [Link]("div");
[Link]("message", "bot-message");
[Link] = getBotResponse(userText);
[Link](botReply);
[Link] = [Link];
}, 600);
function getBotResponse(input) {
input = [Link]();
if ([Link]("hello") || [Link]("hi")) {
return "Hello! 👋 How are you doing today?";
} else if ([Link]("your name")) {
return "I'm ChatBot, your friendly assistant 🤖";
} else if ([Link]("time")) {
return "The current time is " + new Date().toLocaleTimeString();
} else if ([Link]("date")) {
return "Today's date is " + new Date().toLocaleDateString();
} else if ([Link]("help")) {
return "Sure! I can answer basic questions, tell you the time/date, or just chat 😊";
} else if ([Link]("bye")) {
return "Goodbye! 👋 Have a great day!";
} else {
return "I'm not sure about that, but I'm learning every day! 💡";
[Link]("keypress", (e) => {
if ([Link] === "Enter") sendMessage();
});
</script>
</body>
</html><