1 files changed, 92 insertions, 0 deletions
diff --git a/main.handlebars b/main.handlebars
new file mode 100644
index 0000000..759b6e6
--- /dev/null
+++ b/main.handlebars
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>spiraling into insanity</title>
+    <style>
+
+	div {
+	    margin-top: 50px;
+	    display: flex;
+	    flex-direction: column;
+	    align-items: center;
+	}
+	input {
+	    margin-bottom: 10px;
+	}
+	textarea {
+	    margin-bottom: 10px;
+	}
+	.button {
+	    font-size: 20pt;
+	}
+	@media (prefers-color-scheme: dark) {
+	    body {
+		background: #292b33;
+		color: #f5f5f5
+	    }
+	    input {
+		background: SlateGrey;
+		color: white;
+		font-size: 15pt;
+	    }
+	    textarea {
+		background: SlateGray;
+		color: white;
+	    }
+	    .button {
+		background: #292b33;
+		color: #f5f5f5
+	    }
+	}
+
+    </style>
+
+    <script>
+      function formatDate() {
+        const now = new Date();
+        const options = { month: 'long', day: 'numeric', year: 'numeric' };
+        const formattedDate = now.toLocaleString('en-US', options);
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        return `${formattedDate}\n${hours}:${minutes}`;
+      }
+
+      function updateDate() {
+        const dateElement = document.getElementById('date');
+        if (dateElement) {
+          dateElement.textContent = formatDate();
+        }
+      }
+
+      window.onload = function() {
+        updateDate();
+        setInterval(updateDate, 1000);
+      };
+      async function sendMessage() {
+        fetch("/submit", {
+          method: "POST",
+          body: JSON.stringify({
+            tags: document.getElementById('tags').value,
+            text: document.getElementById('entry').value
+          }),
+          headers: {
+            "Content-type": "application/json; charset=UTF-8"
+          }
+        });
+      }
+    </script>
+</head>
+
+<body>
+  <div>
+    <h1 id="date"></h1>
+    <input name="tags" type="text" placeholder="Tags" id="tags" value="" autocomplete="off"/>
+    <textarea name="text" id="entry" rows="25" placeholder="Text" cols="48" value="" autocomplete="off"></textarea>
+    <input class="button" id="clickMe" type="button" value="Submit" onclick="sendMessage();" />
+  </div>
+</body>
+
+</html>