M index.html => index.html +73 -15
@@ 6,30 6,88 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<script src="/htmx.min.js"></script>
+ <style>
+button,
+input[type=submit],
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+ border-color: #1F1B24;
+ border-width: 1px;
+ border-radius: 5px;
+ border-style: solid;
+ padding: 4px 10px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+}
+
+textarea {
+ height: 60px;
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #1F1B24;
+ color: white;
+ }
+
+ button,
+ input[type=submit],
+ input[type=text],
+ input[type=password],
+ input[type=email],
+ textarea {
+ background-color: #36303d;
+ color: white;
+ border-color: white;
+ }
+
+ button:hover,
+ input[type=submit]:hover {
+ background-color: #4e4558;
+ }
+}
+</style>
</head>
<body>
<p>
<ul>FILES</ul>
</p>
- <p>
- <input type="text" id="default-value" value="DEFAULT_VALUE">
- <button onclick="
- document.getElementById('default-value').focus();
- document.getElementById('default-value').select();
- document.execCommand('copy')
- ">copy</button>
- </p>
- <p>
+ <div style="display: flex; align-items: flex-end;">
+ <div>
+ <textarea id="default-value">DEFAULT_VALUE</textarea>
+ </div>
+
+ <div>
+ <button onclick="
+ document.getElementById('default-value').focus();
+ document.getElementById('default-value').select();
+ document.execCommand('copy')
+ ">copy</button>
+ </div>
+ </div>
<form hx-get="/DEFAULT_KEY">
- <input id="value" name="value" type="text">
- <button type="submit">set</button>
+ <div style="display: flex; align-items: flex-end;">
+ <div>
+ <textarea id="value" name="value"></textarea>
+ </div>
+ <div>
+ <button type="submit">set</button>
+ </div>
+ </div>
</form>
<form action="/files" method="post" enctype="multipart/form-data">
- <input type="file" id="files" name="files"
- accept="image/jpeg, image/png, application/pdf" multiple>
- <button type="submit">upload</button>
+ <div style="display: flex">
+ <div>
+ <input type="file" id="files" name="files"
+ accept="image/jpeg, image/png, application/pdf" multiple>
+ </div>
+ <div>
+ <button type="submit">upload</button>
+ </div>
+ </div>
</form>
- </p>
</body>
</html>
M index.js => index.js +2 -1
@@ 30,7 30,7 @@ function set(send, key, value) {
return send('OK -- Value saved', 200, 'text/plain');
}
-server.get(({path, query}, {send}) => {
+server.get(({path, query}, {send, res}) => {
let key = path[0] || query.key;
let value = path[1] || query.value;
@@ 67,6 67,7 @@ server.get(({path, query}, {send}) => {
break;
}
} else {
+ res.setHeader('HX-Refresh', 'true');
set(send, key, value);
}
});
M lib/http-server.js => lib/http-server.js +2 -2
@@ 44,9 44,9 @@ const server = http.createServer((req, res) => {
if (contentType.includes('multipart/form-data')) {
let boundary = contentType.split('boundary=')[1];
let files = parseMultipart(body, boundary);
- handler({path, query, files}, {send, redirect});
+ handler({path, query, files}, {send, res, redirect});
} else {
- handler({path, query, body}, {send, redirect});
+ handler({path, query, body}, {send, res, redirect});
}
} else {
send('Method Not Allowed', 405);