37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Vectorgons</title>
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #000; color: #8af;
|
|
font-family: system-ui, sans-serif; }
|
|
#wrap { display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
padding: 12px; box-sizing: border-box; }
|
|
#canvas { background: #000; border: 1px solid #234; outline: none;
|
|
width: 1100px; height: 760px; max-width: 100%; }
|
|
/* In fullscreen, fill the whole screen. The program resizes the canvas
|
|
backing buffer to the screen resolution (see on_fullscreen_change), so it
|
|
renders at the screen's aspect ratio and fills it edge-to-edge with no
|
|
black bars and no distortion. */
|
|
#canvas:fullscreen,
|
|
#canvas:-webkit-full-screen {
|
|
width: 100vw; height: 100vh; max-width: none; border: 0; background: #000;
|
|
}
|
|
#hint { font-size: 13px; opacity: .6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrap">
|
|
<!-- The canvas must have id="canvas" and be focusable (tabindex) for keys. -->
|
|
<canvas id="canvas" width="1100" height="760" tabindex="0"></canvas>
|
|
<div id="hint">Click the canvas, then use the on-screen controls (WASD / arrows / etc.). F = fullscreen.</div>
|
|
</div>
|
|
|
|
<!-- External scripts only, so this page works under a strict CSP (script-src
|
|
'self'). vectorgons-boot.js must load before vectorgons.js. -->
|
|
<script src="vectorgons-boot.js"></script>
|
|
<script src="vectorgons.js"></script>
|
|
</body>
|
|
</html>
|