<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="data:," />
<title>Minimal Operad</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #0d1117;
}
#operad-canvas {
display: block;
width: 100vw;
height: 100vh;
outline: none;
}
#operad-status {
position: fixed;
left: 12px;
bottom: 12px;
max-width: min(560px, calc(100vw - 24px));
padding: 8px 10px;
border: 1px solid #3a4556;
border-radius: 4px;
background: rgba(15, 20, 28, 0.92);
color: #d8e0ec;
font: 13px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
</style>
</head>
<body>
<canvas id="operad-canvas"></canvas>
<div id="operad-status">Loading WebGPU app...</div>
<script type="module">
import init, { start } from "./pkg/minimal_web.js";
const status = document.getElementById("operad-status");
init()
.then(() => start())
.then(() => {
if (status) status.remove();
})
.catch((error) => {
console.error(error);
if (status) {
status.textContent = `Failed to start app: ${error?.message ?? error}`;
}
});
</script>
</body>
</html>