first fully working version

templates/guest.html.tera

@@ -1,21 +1,46 @@
 <div id="page-container">
   <div id="header-container">
     <h1 id="title">iwakura.rip</h1>
+    <a class="link" onclick="show_message_poster()" style="margin-bottom: 10px;">&nbsp;[ post message ]&nbsp;</a>
   </div>
+  <div id="entries-container">
   {% for message in messages %}
-    <div id="entries-container">
-      <div class="guest-entry">
-        <div class="entry-header">
-          <bu class="entry-title">{{ message.name }}</bu>
-          <bu class="entry-date">{{ message.date }}</bu>
-        </div>
-        <div class="entry-body">
-          <p>{{ message.body }}</p>
-        </div>
+    <div class="guest-entry">
+      <div class="entry-header">
+        <bu class="entry-title">{{ message.name }}</bu>
+        <bu class="entry-date">{{ message.date }}</bu>
+      </div>
+      <div class="entry-body">
+        <p>{{ message.body }}</p>
       </div>
     </div>
   {% endfor %}
+  </div>
+  <div id="post-container">
+      <bu id="name-label">name</bu>
+      <input type="text" id="name-box" name="name-box"><br>
+    <div class="break"></div>
+      <bu id="msg-label">message</bu>
+      <textarea id="msg-box"></textarea>
+    <div class="break"></div>
+    <a class="link" onclick="send_msg()">&nbsp;[ send ]&nbsp;</a>
+  </div>
 </div>
+<script>
+  let show_message_poster = () => {
+    document.getElementById("entries-container").style.display = "none";
+    document.getElementById("post-container").style.display = "flex";
+  }
+  let send_msg = async () => {
+    fetch("/post_message", {
+      "method": "POST",
+      "body": JSON.stringify({
+        body: document.getElementById("msg-box").value,
+        name: document.getElementById("name-box").value
+      }),
+    })
+  }
+</script>
 <style>
 :root {
   --term-color: #4AF626;
@@ -23,11 +48,11 @@
 }
 @font-face {
   font-family: "Hack Nerd Font";
-  src: url(../resources/ttf/HNF-Reg.ttf);
+  src: url(/assets/ttf/HNF-Reg.ttf);
 }
 #title {
-    background: url("../resources/img/lain.png");
-    background-position: -200px 1125px;
+    background: url("/assets/img/lain.png");
+    background-position: -100px 1125px;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 35px;
@@ -37,9 +62,49 @@
     margin-top: var(--title-gap);
     font-family: var(--title-font);
 }
+#post-container {
+  width: 50%;
+  padding: 5px;
+  border: 1px solid var(--term-color);
+  display: none;
+  margin: auto;
+  margin-top: 10px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+input {
+  margin-left: auto;
+  float: right;
+}
+.break { 
+  flex-basis: 100%;
+  height: 0;
+}
+.link:hover {
+  background-color: var(--term-color);
+  color: black;
+}
+label {
+  text-align: left;
+  clear: both;
+  float: left;
+}
+.link {
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  transition: 0.3s;
+}
+#header-container {
+  text-align: center;
+}
 #entries-container {
   align-items: center;
   gap: 10px;
+  margin-top: 10px;
   display: flex;
   flex-direction: column;
 }