<!DOCTYPE html>
<html>
<head>
  <title>Two-Person Chat</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Chat Here </h1>
    <div id="chatbox"></div>
    <input type="text" id="message" placeholder="Type your message...">
    <button id="send">Send</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

index.html

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

#chatbox {
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
}

#message {
  width: 80%;
  padding: 5px;
  margin-right: 10px;
}

#send {
  padding: 5px 10px;
}

styles.css

// Prompt for password on page load
var password = prompt("Please enter the password");
var authenticated = false;

if (password === "ma") {
  authenticated = true;
} else {
  alert("Incorrect password. Access denied.");
  location.reload();
}

// If password is correct, proceed with the chat functionality
if (authenticated) {
  var chatbox = document.getElementById("chatbox");
  var messageInput = document.getElementById("message");
  var sendButton = document.getElementById("send");

  sendButton.addEventListener("click", sendMessage);

  function sendMessage() {
    var message = messageInput.value.trim();
    if (message !== "") {
      var messageElement = document.createElement("p");
      messageElement.textContent = message;
      chatbox.appendChild(messageElement);
      messageInput.value = "";
      chatbox.scrollTop = chatbox.scrollHeight;
    }
  }
}