5a39e3a947
Lanes A (engine), B (player), C (worldgen), D (machines/quest), E (audio/fx/ui) as landed, each with HANDOFF.md + update docs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
42 lines
2.3 KiB
HTML
42 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>TURNCRAFT · Lane D — Machines & Interaction demo</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
html, body { margin: 0; height: 100%; background: #17150f; overflow: hidden;
|
|
font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #d8d4c8; }
|
|
#app { position: fixed; inset: 0; }
|
|
#app canvas { display: block; }
|
|
#crosshair { position: fixed; left: 50%; top: 50%; width: 14px; height: 14px;
|
|
transform: translate(-50%, -50%); pointer-events: none; opacity: 0.8; }
|
|
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #f2eede; }
|
|
#crosshair::before { left: 6px; top: 0; width: 2px; height: 14px; }
|
|
#crosshair::after { top: 6px; left: 0; height: 2px; width: 14px; }
|
|
#panel { position: fixed; top: 8px; left: 8px; width: 268px; max-height: calc(100vh - 16px);
|
|
overflow: auto; background: rgba(20,19,14,0.86); border: 1px solid #3a352a;
|
|
border-radius: 8px; padding: 10px 11px; backdrop-filter: blur(3px); }
|
|
#panel h1 { font-size: 12px; margin: 0 0 6px; letter-spacing: 0.04em; color: #f0e9d6; }
|
|
#panel h2 { font-size: 11px; margin: 12px 0 4px; color: #9fd0ff; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
#panel .legend { color: #948d7c; font-size: 11px; margin-bottom: 4px; }
|
|
#panel button { font: inherit; margin: 2px 3px 2px 0; padding: 3px 7px; cursor: pointer;
|
|
background: #2b2820; color: #e7e1d0; border: 1px solid #46402f; border-radius: 5px; }
|
|
#panel button:hover { background: #383322; }
|
|
#panel .row { margin: 3px 0; }
|
|
#status { white-space: pre-wrap; color: #cfe8c8; font-size: 11px; margin-top: 4px; }
|
|
.node { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
|
|
margin-right: 5px; vertical-align: middle; background: #6b3030; }
|
|
.node.on { background: #59d67a; box-shadow: 0 0 6px #59d67a; }
|
|
#won { color: #ffd54a; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<div id="crosshair"></div>
|
|
<div id="panel"></div>
|
|
<script type="module" src="/src/demo/machinesDemo.ts"></script>
|
|
</body>
|
|
</html>
|