htmx/www/_includes/demo_ui.html.liquid

<style>
    #demo-server-info {
        padding: 8px;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        height: 64px;
        width: 100vw;
        background-color: whitesmoke;
        border-top: 2px solid gray;
        overflow: hide;
        margin: 0px;
    }
    #demo-server-info.show {
        max-height: 45vh;
        height: 500px;
        overflow: scroll;
    }
    #demo-activity {
        height:300px
    }

    #demo-activity div {
        vertical-align: top
    }

    #demo-canvas {
        margin-bottom: 500px;
        padding-top: 12px;
    }

</style>
<script>
    function toggleRequestInfo() {
        var classList = document.getElementById("demo-server-info").classList;
        classList.toggle("show");
        if (classList.contains('show')) {
            document.getElementById("request-info-toggler").innerHTML = "&downarrow; Hide"
        } else {
            document.getElementById("request-info-toggler").innerHTML = "&uparrow; Show"
        }
    }
</script>
<div id="demo-server-info">
    <div>Server Requests<span id="request-count"></span> <a id="request-info-toggler" onclick="toggleRequestInfo()" style="cursor: pointer">&uparrow; Show</a></div>
    <div id="demo-activity" class="row">
        <div class="3 col" >
            <ol id="demo-timeline" reversed>
            </ol>
        </div>
        <div id="demo-current-request" class="9 col">
        </div>
    </div>
</div>

## Demo
<div id="demo-canvas">
</div>