44 lines
2.2 KiB
HTML
44 lines
2.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Moonlit Engine — skeleton demo</title>
|
||
|
|
<style>
|
||
|
|
:root { color-scheme: dark; }
|
||
|
|
body { margin: 0; background: #0b0b12; color: #ddd; font: 14px/1.4 monospace;
|
||
|
|
display: flex; flex-direction: column; align-items: center; }
|
||
|
|
#stage { position: relative; margin-top: 12px; }
|
||
|
|
canvas { image-rendering: pixelated; border: 1px solid #333; cursor: crosshair; }
|
||
|
|
#verbs { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; justify-content: center; }
|
||
|
|
#verbs button, #squares button { font: inherit; padding: 6px 12px; background: #1d2438;
|
||
|
|
color: #cfd8ff; border: 1px solid #3a4a70; border-radius: 4px; cursor: pointer; }
|
||
|
|
#verbs button.selected { background: #3a4a70; color: #fff; }
|
||
|
|
#textbox { min-height: 3.2em; width: 640px; max-width: 95vw; background: #11131c;
|
||
|
|
border: 1px solid #333; padding: 8px 10px; margin-top: 6px; }
|
||
|
|
#squares { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; width: 640px; max-width: 95vw; }
|
||
|
|
#squares button { text-align: left; flex: 1 1 45%; }
|
||
|
|
#sys { margin: 8px 0; display: flex; gap: 8px; }
|
||
|
|
#sys button { font: inherit; padding: 4px 10px; background: #141824; color: #9aa; border: 1px solid #2c3446; border-radius: 4px; cursor: pointer; }
|
||
|
|
#title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||
|
|
background: rgba(5,5,10,.92); font-size: 18px; text-align: center; }
|
||
|
|
kbd { background: #222; border: 1px solid #444; border-radius: 3px; padding: 1px 5px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="stage">
|
||
|
|
<canvas id="cv" width="640" height="480"></canvas>
|
||
|
|
<div id="title">MOONLIT ENGINE — skeleton demo<br><br>Press any key / click to begin</div>
|
||
|
|
</div>
|
||
|
|
<div id="verbs"></div>
|
||
|
|
<div id="textbox"></div>
|
||
|
|
<div id="squares"></div>
|
||
|
|
<div id="sys">
|
||
|
|
<button id="save">Save</button>
|
||
|
|
<button id="load">Load</button>
|
||
|
|
<button id="skip">Skip intro</button>
|
||
|
|
<label>vol <input id="vol" type="range" min="0" max="1" step="0.05" value="0.8"></label>
|
||
|
|
</div>
|
||
|
|
<script type="module" src="boot.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|