<title>ChatPlus</title> <style> * { box-sizing: border-box; font-family: Arial, sans-serif; } body { margin: 0; background: #2b2d31; color: #fff; } .app { display: flex; height: 100vh; }

/* Sidebar */
.sidebar {
  width: 220px;
  background: #1e1f22;
  padding: 15px;
}
.sidebar h2 {
  margin: 0 0 15px;
  font-size: 20px;
}
.channel {
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}
.channel:hover {
  background: #3f4147;
}

/* Chat */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}
.message {
  background: #3f4147;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.input-box {
  display: flex;
  padding: 10px;
  background: #1e1f22;
}
.input-box input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
  outline: none;
}
.input-box button {
  margin-left: 8px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background: #5865f2;
  color: #fff;
  cursor: pointer;
}
.input-box button:hover {
  background: #4752c4;
}

</style>

ChatPlus

# general

# gaming

# support

<div class="input-box">
  <input type="text" id="msgInput" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>
</div>

<script> function sendMessage() { const input = document.getElementById("msgInput"); const text = input.value.trim(); if (text === "") return; const msgDiv = document.createElement("div"); msgDiv.className = "message"; msgDiv.innerHTML = "You: " + text; document.getElementById("messages").appendChild(msgDiv); input.value = ""; } </script>