L1: chat.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Chatroom</title>
    <meta name="description" content="Messages">
    <meta name="author" content="Isak et Nicolas">

  <style>
    html, body {
        overflow: hidden;
        height: 100%;
    }

    body {
        background: url("static/images/BG.jpg") center center fixed;
    }

    form {
        background-color: white;
        margin-top: 8%;
        margin-left: 10%;
        margin-right: 10%;
    }

    #message-box {


    }

    #chat-box {
        margin-left: 10%;
        margin-right: 10%;
        background-color: white;
    }

  #chat {
    margin-top: 15px;
    padding: 5px;
        height: 500px;
        overflow-y: scroll;
  }

  .message {
    padding: 0px 20px 10px 5px;
B  }

  .date {
    font-size: 12px;
    color: grey;
  }

  .username {
    font-size: 16px;
    font-weight: bold;
  }

  .content::before {
        font-weight: bold;
    content: " : ";
  }

  .content {
    font-size: 16px;
    color: black;
  }

    input {
        display: inline-block;
    }
  </style>

</head>

<body>
    <form action="" method="post">
        <fieldset>
            <legend>Send Message</legend>
            <textarea name="message" cols="80" rows="4" maxlength="200" style="font-size: 15px; resize: none;"></textarea>
            <br /> <br />
            <input type="submit" name="button" value="Submit" style="float: left" />
            <input type="submit" name="button" value="Logout" style="float: right" />
        </fieldset>
    </form>

    <div id="chat-box">
      <fieldset id="chat">
        <legend>Chat</legend>
            {% for message in chat %}
      <div class="message">
        <span class="date">[{{ message[0] }}]</span>
        <span class="username" style="color: #{{ message[1] }};">{{ message[2] }}</span>
        <span class="content">{{ message[3] }}</span>
            </div>
            {% endfor %}
      </fieldset>
    </div>
</body>
</html>