this is awful right now

2025-04-01 18:14:36 -04:00 · 2025-04-01 18:14:36 -04:00 · 353bd175b0
commit 353bd175b0
7 changed files with 991 additions and 0 deletions
--- a/static/index.css
+++ b/static/index.css
@ -0,0 +1,55 @@
+body {
+    margin: 0;
+    padding-bottom: 3rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+#form {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 0.25rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    height: 3rem;
+    box-sizing: border-box;
+    backdrop-filter: blur(10px);
+}
+
+#input {
+    border: none;
+    padding: 0 1rem;
+    flex-grow: 1;
+    border-radius: 0.3rem;
+    margin: 0.25rem;
+}
+
+#input:focus {
+    outline: none;
+}
+
+#form>button {
+    background: #333;
+    border: none;
+    padding: 0 1rem;
+    margin: 0.25rem;
+    border-radius: 3px;
+    outline: none;
+    color: #fff;
+}
+
+#messages {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+#messages>li {
+    padding: 0.5rem 1rem;
+    white-space: pre-wrap;
+}
+
+#messages>li:nth-child(odd) {
+    background: #efefef;
+}
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Dervland</title>
+    <link rel="stylesheet" href="index.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+    <ul id="messages"></ul>
+    <form id="form" action="">
+        <input id="input" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src='/index.js'></script>
+</body>
+
+</html>
--- a/static/index.js
+++ b/static/index.js
@ -0,0 +1,32 @@
+
+var messages = document.getElementById('messages');
+var form = document.getElementById('form');
+var input = document.getElementById('input');
+
+async function main(e) {
+    e.preventDefault();
+    if (!input.value) return;
+
+    let msg = await fetch("http://localhost:3007/", {
+        "method": "POST",
+        "headers": {
+            "content-type": "application/json",
+        },
+        "body": JSON.stringify({ "data": input.value })
+    })
+
+    msg = await msg.text();
+    msg = msg.trim();
+
+    input.value = '';
+
+    var item = document.createElement('li');
+    item.textContent = msg;
+    messages.appendChild(item);
+    window.scrollTo(0, document.body.scrollHeight);
+}
+
+form.addEventListener('submit', main);
+
+input.value = 'test';
+main({ preventDefault: () => { }})