Livechat.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Realtime Chat Application</title>
    <script defer src="js/Client.js"></script>
    <script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
    <style>
      body {
        background-image: url("https://simpleji-images.s3.ap-south-1.amazonaws.com/image/catalog/DWM/Decorator/White-color-background-with-grey-color-traditional-design-texture-surface-wallpaper-521670-600x600.jpg");
      }
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        color: #fff;
        padding: 10px;
        margin-bottom: 10px;
      }

      .navbar a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
      
      }
      .container {
        max-width: 955px;
        border: 2px solid black;
        height: 70vh;
        margin: auto;
        padding: 33px;
        overflow-y: auto;
        margin-bottom: 23px;

      }
      .message {
        background-color: bisque;
        width: 24%;
        padding: 10px;
        margin: 17px 12px;
        border: 2px solid black;
        border-radius: 10px;
      }
      .right {
        float: right;
        clear: both;
      }
      .left {
        float: left;
        clear: both;
      }
      #Send-container
      {
        text-align: center;
        max-width: 985px;
        display: block;
        margin: auto;
      }
      #messageInp
      {
width: 92%;
border: 2px solid black;
border-radius: 6px;
height: 34px;
      }
      .btn
      {
        cursor: pointer;
        border: 2px solid black;
        border-radius: 6px;
        height: 2rem;
      }
    </style>
  </head>
  <body>
    <nav>
      <div class="navbar">
        <a href="main.html">Home</a>
        <a href="#">About</a>
        <a href="contact.html">Contact</a>
      </div>
    </nav>
    <div class="container">
      <div class="message right">Om : How are you</div>
      <div class="message left">pati: I Am Fine</div>
    </div>
    <div class="send">
        <form action="#" id="Send-container">
      <input action="#" name="messageInp" id="messageInp">
        <button
          class="btn"
          type="submit
            "
        >
          Send
        </button>
      </form>
    </div>
  </body>
</html>