47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Generic STFX UI</title>
|
|
<style>
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
background: linear-gradient(#FFF, #EEE, #CCC);
|
|
color: #000;
|
|
|
|
font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, system-ui, sans-serif;
|
|
}
|
|
output {
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
font-weight: normal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{=}
|
|
<h1>{name}</h1>
|
|
<script src="cbor.min.js"></script>
|
|
<script src="matsui-bundle.min.js"></script>
|
|
<script>
|
|
addEventListener('message', e => {
|
|
let state = window.state = Matsui.replace(document.body, CBOR.decode(e.data));
|
|
state.trackMerges(merge => {
|
|
window.parent.postMessage(CBOR.encode(merge), '*');
|
|
}, true/*async*/, false/*include direct merges*/);
|
|
|
|
addEventListener('message', e => {
|
|
state.merge(CBOR.decode(e.data));
|
|
});
|
|
}, {once: true});
|
|
|
|
//*
|
|
window.dispatchEvent(new MessageEvent('message', {
|
|
data: CBOR.encode({name: "Hello 😀"})
|
|
}));//*/
|
|
window.parent.postMessage(CBOR.encode("ready"), '*');
|
|
</script>
|
|
</body>
|
|
</html>
|