web_client/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WebSocket Client</title>
    <meta name="author" content="Barkibu" />
    <meta
      name="description"
      content="Basic Web Client connecting to the websocket"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <p>Basic WebSocket Send and Receive!</p>
    <form id="connection_form">
      <input id="websocket_server_url" type="text" value="localhost:5555" />
      <button type="submit">Connect To WebSocket</button>
    </form>
    <h2>Message List</h2>
    <ol id="message_list" class="message-container"></ol>
    <hr />
    <form id="message_form">
      <div id="button-container"></div>
      <textarea id="message_input" ></textarea>
      <button type="submit">Send Message</button>
    </form>

    <form id="rollback_form">
      <input id="rollback_steps" type="number" min="1" value="1"/>
      <button type="submit">Rollback</button>
    </form>
    <script src="script.js" defer></script>
  </body>
</html>