44 lines
1.1 KiB
HTML
44 lines
1.1 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', 'Alte DIN 1451 Mittelschrift', 'D-DIN', 'OpenDin', 'Clear Sans', 'Barlow', 'Abel', 'Franklin Gothic Medium', 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>
|
|
<ul>
|
|
<template @foreach>
|
|
<li @if="${d => d.$type == 'ParamRange'}">{=}</li>
|
|
</template>
|
|
</ul>
|
|
<script src="cbor.min.js"></script>
|
|
<script src="matsui-bundle.min.js"></script>
|
|
<script>
|
|
let state = Matsui.replace(document.body, {name: "..."});
|
|
state.trackMerges(merge => {
|
|
window.parent.postMessage(CBOR.encode(merge), '*');
|
|
});
|
|
addEventListener('message', e => {
|
|
state.merge(CBOR.decode(e.data));
|
|
});
|
|
|
|
window.parent.postMessage(CBOR.encode("ready"), '*');
|
|
</script>
|
|
</body>
|
|
</html>
|