console.html

﻿<!DOCTYPE html>
<html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link href='/style.css' rel='stylesheet' type='text/css'>
    </head>
    <body style="height: 100%;">
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100%;">
            <h1>live console</h1>
            <textarea style="width: 100%; height: 100%; background-color: #000000; color: #EEEEEE" id="output"></textarea>
            <div>Auto scroll with output</div>
            <input type="checkbox" id="scroll" checked>
        </div>
        <script src="/script.js"></script>
        <script>
            const console = document.getElementById("output")
            const scroll = document.getElementById("scroll")

            setInterval(() => {
                fetch("/consoleoutput").then(res => res.text().then(text => {
                    console.value += text
                    if(scroll.checked) console.scrollTop = console.scrollHeight
                }))
            }, 2000);
        </script>
    </body>
</html>