index.html

<!doctype html>
<html>

    <head>
        <title>Schemascii</title>
        <script src="https://cdn.jsdelivr.net/pyodide/v0.23.2/full/pyodide.js"></script>
        <style>
            .flex {
                display: flex;
                flex: 1;
                padding: 2px;
            }

            .flex.row {
                flex-direction: row;
            }

            .flex.column {
                flex-direction: column;
            }

            textarea {
                min-height: 10em;
                resize: vertical;
            }

            #errors {
                color: red;
            }

            a,
            a:visited {
                color: blue;
            }

            @media screen and (prefers-color-scheme: dark) {

                body,
                textarea {
                    color: white;
                    background: black;
                }

                a,
                a:visited {
                    color: magenta;
                }
            }
        </style>
        <style id="custom-css"></style>
    </head>

    <body>
        <h1>Schemascii Playground</h1>
        <h2>using schemascii version <select id="version"></select></h2>
        <div class="flex row">
            <div class="flex column">
                <h2>Schemascii Source</h2><textarea id="schemascii" disabled></textarea>
            </div>
            <div class="flex column">
                <h2>CSS</h2><textarea id="css" disabled></textarea>
            </div>
        </div>
        <h2>Result <button id="download">Download</button></h2>
        <div id="output"></div>
        <h2>Messages</h2>
        <pre id="console"></pre>
        <h2>Errors</h2>
        <pre id="errors"></pre>
        <h2>More Information</h2>
        <p><a href="https://github.com/dragoncoder047/schemascii/"
                target="_blank">https://github.com/dragoncoder047/schemascii/</a></p>
    </body>
    <script src="scripts/web_startup.js"></script>

</html>