Scribd
Upload
25 views

ChatApp Main HTML Interface

Uploaded by

a9650827710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
25 views

ChatApp Main HTML Interface

Uploaded by

a9650827710
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App - Main Screen</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
}
header {
background-color: #4CAF50;
color: white;
padding: 15px 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
#chat-container {
max-width: 600px;
margin: 20px auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.chat-list {
padding: 10px 20px;
max-height: 400px;
overflow-y: auto;
}
.chat-item {
display: flex;
justify-content: space-between;
padding: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.chat-item:last-child {
border-bottom: none;
}
.chat-item:hover {
background-color: #f0f0f0;
}
.chat-item span {
font-size: 18px;
}
#add-chat {
display: flex;
padding: 10px 20px;
background-color: #4CAF50;
border-top: 1px solid #ccc;
}
#add-chat input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
#add-chat button {
padding: 10px 15px;
background-color: #ffffff;
color: #4CAF50;
border: 1px solid #4CAF50;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}
#add-chat button:hover {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<header>Chat App</header>
<div id="chat-container">
<div class="chat-list" id="chat-list">
<!-- Chat rooms will be dynamically loaded here -->
<div class="chat-item">
<span>General Chat</span>
<span>➡️</span>
</div>
<div class="chat-item">
<span>Study Group</span>
<span>➡️</span>
</div>
</div>
<div id="add-chat">
<input type="text" id="chatroom-input" placeholder="Enter new chatroom
name">
<button id="add-chatroom-button">Add Chat</button>
</div>
</div>
<script>
const chatList = document.getElementById("chat-list");
const chatroomInput = document.getElementById("chatroom-input");
const addChatroomButton = document.getElementById("add-chatroom-button");

// Add a new chatroom dynamically


addChatroomButton.addEventListener("click", () => {
const chatroomName = chatroomInput.value.trim();
if (chatroomName) {
const chatItem = document.createElement("div");
chatItem.className = "chat-item";
chatItem.innerHTML = `<span>${chatroomName}</span><span>➡️</span>`;
chatList.appendChild(chatItem);
chatroomInput.value = ""; // Clear input
} else {
alert("Chatroom name cannot be empty!");
}
});
</script>
</body>
</html>

You might also like