<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Times New Bastard</title>
        <script>
            function chunk(n) {
                let i = 0;
                let out = [];
                while (i < this.length) {
                    out.push(this.slice(i, i + n));
                    i += n;
                }
                out.push(this.slice(i, i + n));
                return out.filter(xs => xs.length > 0);
            }

            Object.defineProperty(Array.prototype, "chunk", {
                value: chunk,
            });

            Object.defineProperty(String.prototype, "chunk", {
                value: chunk,
            });

            // https://cohost.org/doq/post/2442981-span-style-font
            // font-family: "Times New Roman", "Liberation Serif", serif;
            //font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif;
            function main() {
                const input = document.getElementById("input");
                const output = document.getElementById("output");
                const preview = document.getElementById("preview");
                const serif_font = document.getElementById("serif-font");
                const sans_serif_font =
                    document.getElementById("sans-serif-font");

                function serif(str) {
                    const span = document.createElement("span");
                    span.style = serif_font.value.split("\n").join("");
                    span.innerText = str;
                    return span;
                }

                function sans_serif(str) {
                    const span = document.createElement("span");
                    span.style = sans_serif_font.value.split("\n").join("");
                    span.innerText = str;
                    return span;
                }

                // good news! https://github.com/weiweihuanghuang/Times-New-Bastard seems to be based on _characters_, not letters
                function update() {
                    const text = input.value;
                    const chunks = text.chunk(7);
                    const magic = chunks.flatMap(ch => [
                        serif(ch.slice(0, 6)),
                        ...(ch[6] ? [sans_serif(ch[6])] : []),
                    ]);
                    preview.innerHTML = "";
                    preview.append(...magic);
                    output.value = `<span style="
    /* your style here */
">${magic.map(el => el.outerHTML).join("")}</span>`;
                }

                function update_on_change(elem) {
                    elem.addEventListener("change", update);
                    elem.addEventListener("keyup", update);
                }

                update_on_change(input);
                update_on_change(serif_font);
                update_on_change(sans_serif_font);

                output.onclick = () => {
                    navigator.clipboard.writeText(output.value);
                };
            }

            window.onload = main;
        </script>
        <style>
            #input {
                grid-area: a;
            }

            #preview {
                word-break: break-word;
                overflow: hidden;
                width: 100%;
                height: 100%;
                grid-area: b;
            }

            #output {
                grid-area: c;
            }

            #serif-font {
                grid-area: d;
            }

            #sans-serif-font {
                grid-area: e;
            }

            #promo {
                grid-area: f;
            }

            body {
                margin: 0;
                margin: 1rem;
                height: calc(100vh - 2rem);

                display: grid;
                gap: 0.25rem;
                /* didn't feel like actual names */
                grid-template-areas: "a a" "b b" "c c" "d e" "f f";
                grid-template-rows: repeat(4, 1fr) min-content;
            }

            textarea {
                resize: none;
            }

            /* using vars would be good,,, */
            @media (prefers-color-scheme: dark) {
                body,
                a {
                    color: #dcfdfd;
                    background-color: #021111;
                }
                textarea {
                    color: #dcfdfd;
                    background-color: #031d1d;
                    border: 1px solid #dcfdfd;
                }
                textarea:focus {
                    outline: 1px solid #dcfdfd;
                }
            }

            @media (prefers-color-scheme: light) {
                body,
                a {
                    background-color: #dcfdfd;
                    color: #021111;
                }
                textarea {
                    background-color: #e6ffff;
                    color: #021111;
                    border: 1px solid #021111;
                }
                textarea:focus {
                    outline: 1px solid #021111;
                }
            }
        </style>
    </head>
    <body>
        <textarea id="input" title="input"></textarea>
        <div
            id="preview"
            title="preview, should be pretty much exactly accurate"
        ></div>
        <textarea
            id="output"
            readonly
            title="click to copy (only on https)"
        ></textarea>
        <textarea type="text" id="serif-font" title="serif css style">
font-family: "Times New Roman", "Liberation Serif", serif;</textarea
        >
        <textarea type="text" id="sans-serif-font" title="sans-serif css style">
font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif;</textarea
        >
        <div id="promo">
            <a href="./" download="times-new-bastard.html"
                >download this page</a
            >
            which was made by mehbark who has a
            <a href="https://terezi.pyrope.net">website</a> and is on
            <a href="https://cohost.org/mehbark">cohost</a>
            and
            <a href="https://pl.pyrope.net/terezi">fedi</a>. here are some more
            links:
            <a href="https://patreon.com">patreon</a>
            <a href="https://example.org">example</a>
            <a href="https://pyrope.net/mcai"
                >discord server that i made so i could continue saying "man,
                computers are incredible" every day</a
            >
        </div>
    </body>
</html>