mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 13:31:06 +00:00
65 lines
1.5 KiB
HTML
65 lines
1.5 KiB
HTML
<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;
|
|
z-index: 1;
|
|
}
|
|
#demo-server-info.show {
|
|
max-height: 45vh;
|
|
height: 500px;
|
|
overflow: scroll;
|
|
}
|
|
#demo-activity {
|
|
height:300px
|
|
}
|
|
|
|
#demo-activity div {
|
|
vertical-align: top
|
|
}
|
|
|
|
#demo-activity ol li {
|
|
list-style-position: inside;
|
|
}
|
|
|
|
#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 = "↓ Hide"
|
|
} else {
|
|
document.getElementById("request-info-toggler").innerHTML = "↑ 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">↑ 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>
|
|
|
|
<h2><a class="zola-anchor" href="#demo" aria-label="Anchor link for: demo">🔗</a>Demo</h2>
|
|
<div id="demo-canvas">
|
|
</div>
|