~increscent/kvs

0a069911bb7787843e20e71ec6a91b7806efb5e3 — Robert Williams a month ago 7cd151a
dark mode; textarea instead of text inputs
3 files changed, 77 insertions(+), 18 deletions(-)

M index.html
M index.js
M lib/http-server.js
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);