Essentially this is tabbed pages, very quick and dirty. Naturally you'd want to factor this out into separate files, but here it is in a single self-contained html file. The main use case here, combined with this OSC web control panel in Python, is to use a touchscreen laptop as a means of triggering Reaper actions without resorting to myriad contorted keyboard shortcuts. You can do more, such as configuring keypresses which are dependent upon the page.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'/>
<title>Pager</title>
</head>
<body>
<div class="pager">
<div class="controls"></div>
<section class="page" page="a" pagename="Mr Flibble">
<p>hello world</p>
</section>
<section class="page" page="b" pagename="Mr Flibble is Cross">
<p>Fry them with our hex vision</p>
</section>
<section class="page" page="c" pagename="Burn Baby Burn">
<p>It's getting hot in here.</p>
</section>
</div>
</body>
<style>
div.pager div.controls span.button {
display: inline-block;
padding: 1rem;
font-size: 1.5rem;
border: 1px solid black;
margin: 1rem;
box-shadow: 0.5rem 0.5rem 0.5rem black;
background-color: #007;
color: white;
font-family: sans-serif;
}
div.pager section.page {
display: none;
}
div.pager section.page.active {
display: block;
}
</style>
<script>
const q = window.q = (x,y=document) => y.querySelector(x)
const qq = window.qq = (x,y=document) => Array.from(y.querySelectorAll(x))
function acms(e) {
let key = e.key
const code = e.code.toLowerCase()
if( code === "backquote" ) { key = "`" }
if( code.startsWith("digit") ) { key = code.substr(5) }
if( code === "space" ) { key = "space" }
let t = key.toLowerCase()
if( e.shiftKey ) t = "S-"+t
if( e.metaKey ) t = "M-"+t
if( e.ctrlKey ) t = "C-"+t
if( e.altKey ) t = "A-"+t
return t
}
const pager = q(".pager")
const controls = q("div.controls",pager)
const pages = qq("section.page",pager)
pages.forEach( page => {
const page_id = page.getAttribute("page")
const page_text = page.getAttribute("pagename")
const span = document.createElement("span")
span.classList.add("button")
span.textContent = page_text
span.addEventListener("click", e => {
e.preventDefault()
pages.forEach( p => p.classList.remove("active") )
page.classList.add("active")
})
controls.append(span)
})
</script>
</html>