What's Up Web
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(to right, #25d366, #128C7E);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.app-container {
background: #f4fdf9;
width: 90%;
max-width: 400px;
height: 90vh;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
header {
background: #075e54;
color: white;
text-align: center;
padding: 15px;
}
header h1 {
margin: 0;
font-size: 1.5em;
}
.chat-box {
flex: 1;
padding: 15px;
overflow-y: auto;
background: #dcf8c6;
}
.message {
padding: 10px 15px;
margin: 8px 0;
max-width: 80%;
border-radius: 15px;
clear: both;
}
.message.user {
background-color: #34b7f1;
color: white;
align-self: flex-end;
margin-left: auto;
}
.message.bot {
background-color: #ffffff;
color: #333;
align-self: flex-start;
margin-right: auto;
}
.input-section {
display: flex;
border-top: 1px solid #ccc;
padding: 10px;
background: #e6e6e6;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 20px;
border: none;
font-size: 1em;
margin-right: 10px;
outline: none;
}
button {
background-color: #25d366;
border: none;
color: white;
padding: 10px 15px;
border-radius: 50%;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #128c7e;
}
function sendMessage() {
const input = document.getElementById("userInput");
const chatBox = document.getElementById("chatBox");
const message = input.value.trim();
if (message === "") return;
// Display user message
const userMsg = document.createElement("div");
userMsg.className = "message user";
userMsg.innerText = message;
chatBox.appendChild(userMsg);
input.value = "";
// Auto-reply simulation
setTimeout(() => {
const botMsg = document.createElement("div");
botMsg.className = "message bot";
botMsg.innerText = "That's interesting! Tell me more...";
chatBox.appendChild(botMsg);
chatBox.scrollTop = chatBox.scrollHeight;
}, 1000);
chatBox.scrollTop = chatBox.scrollHeight;
}
