templates/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>algia-web TL</title>
  <style type="text/css">
    .twitter__container {
      /* padding: 0; */
      background: #ffffff;
      overflow: hidden;
      /* overflow-wrap: normal; */
      max-width: 80%;
      margin: 20px auto;
      /* font-size: 80%;
      border: solid 1px #eeeeee;
      line-height: 1.0em; */
      word-wrap: break-word;
    }
    hr {
      border:none;
      border-top:dashed 1px;
      height:1px;
      width:2000px;
    }
    .red {
      color: #ff0000;
    }
    .blue {
      color: #0000FF;
    }
    .text-pad {
      padding-left:50px;
    }
    .centering {
      margin-left: auto;
      margin-right: auto;
      width: 70vw;
    }
    .fixing-top{
      position: fixed;
      bottom: 85vh;
    }
    .fixing-bottom{
      position: fixed;
      bottom: 5vw;
    }
    .form-size {
      width: 50vw;
      height: 20vw;
    }
    .submit-btn{
      width: 8vw;
      height: 20vw;
      font-size: 150%;
    }
    .reload-btn{
      width: 8vw;
      height: 10vw;
      font-size: 150%;
    }
  </style>
</head>
<body>
  <button id="reload-btn" class="reload-btn fixing-top">reload page</button>
  <div class="centering">
    <form method="post" action="sub" name="post-form" class="fixing-bottom">
      <input id="note" name="note" type="text" class="form-size"/>
      <!-- <textarea id="note" rows="10" name="note" type="text"/> -->
      <button name="submit-btn" class="submit-btn">post</button>
    </form>
  </div>
  <div class="twitter__container">
    {%- for ii in range( lines|length) %}
    {% if lines[ii][0] == 1 %}
    <hr>
    <span class="red">
      <bold>{{lines[ii][1]}}</bold>
    </span>
<!--  <span class="blue">
      <bold>{{lines[ii][1].split(":")[1]}}</bold>
    </span>
-->
    {% elif lines[ii][0] == 2 %}
    <p class="text-pad">{{ lines[ii][1] }}</p>
    {% else %}
    <a href="{{lines[ii][2]}}"><p class="text-pad">{{ lines[ii][1] }}</p></a>
    {% endif %}
    {%- endfor %}
  </div>
  <script>
    var reloadBtn = document.getElementById('reload-btn');
    reloadBtn.addEventListener('click', function() {
      location.reload();
    });
/*
    document.post-form.reload-btn.addEventListener('click', function() {
      const xhr = new XMLHttpRequest();
      xhr.open('post', 'sub');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

      const note = document.querySelector('input[name=note]');

      fd.append('note', note.value);
      xhr.send(fd);
    });
*/
    </script>
</body>
</html>