:: rewrite ::

templates.old/guest.html.tera

@@ -0,0 +1,159 @@
+<title>Guest Book</title>
+<div id="page-container">
+  <div id="header-container">
+    <h1 id="title"><a href="/">iwakura.rip</a></h1>
+    <p>Leave a nice message for others to read :)</p>
+    <p>Dates are in UTC+2/CEST.</p>
+    <a class="link" id="msg-post" onclick="show_message_poster()" style="margin-bottom: 10px;">&nbsp;[ post message ]&nbsp;</a>
+  </div>
+  <div id="entries-container">
+  {% for message in messages %}
+    <div class="guest-entry">
+      <div class="entry-header">
+        <bu class="entry-title">{{ message.name }}</bu>
+        <bu class="entry-date">{{ message.date | date(format="%Y-%m-%d | %H:%M", timezone="Europe/Amsterdam")}}</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_post_message = false;
+  let show_message_poster = () => {
+    if (!show_post_message) {
+      show_post_message = !show_post_message
+      document.getElementById("entries-container").style.display = "none";
+      document.getElementById("post-container").style.display = "flex";
+      document.getElementById("msg-post").innerText = " [ back ] ";
+      return
+    }
+    document.getElementById("msg-post").innerText = " [ post message ] "
+    show_post_message = !show_post_message
+    document.getElementById("entries-container").style.display = "flex";
+    document.getElementById("post-container").style.display = "none";
+  }
+  let send_msg = async () => {
+    fetch("/post_message", {
+      "method": "POST",
+      "body": JSON.stringify({
+        body: document.getElementById("msg-box").value,
+        name: document.getElementById("name-box").value
+      }),
+    }).then(x => {
+      window.location.reload()
+    })
+  }
+</script>
+<style>
+a {
+  text-decoration: none;
+}
+a:active {
+  text-decoration: none;
+}
+:root {
+  --term-color: #4AF626;
+  --title-gap: 0px;
+  --title-font: "Hack Nerd Font";
+}
+@font-face {
+  font-family: "Hack Nerd Font";
+  src: url(/assets/ttf/HNF-Reg.ttf);
+}
+#title {
+    background: url("/assets/img/lain.png");
+    background-position: -100px 1125px;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 35px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: calc(var(--title-gap) + 10px);
+    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 {
+  cursor: default;
+  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;
+}
+#page-container {
+  font-family: "Hack Nerd Font";
+  color: var(--term-color);
+}
+.guest-entry {
+  width: 50%;
+  padding: 5px;
+  border: 1px var(--term-color) solid;
+}
+.entry-header {
+  display: flex;
+  justify-content: space-between;
+}
+.entry-body {
+  font-size: 14px;
+  overflow: auto;
+  word-wrap: break-word;
+}
+bu {
+  font-weight: bold;
+  text-decoration: underline;
+}
+body {
+  background-color: black;
+}
+</style>