39 lines
2.3 KiB
HTML
39 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-build="{{.Build}}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}}</title>
|
|
{{if .Icon}}<link rel="icon" href="favicon.png">{{else}}<link rel="icon" href="data:,">{{end}}
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #0d0e10; color: #e4e3df; overflow: hidden; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
|
|
.loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0d0e10; transition: opacity 0.25s; }
|
|
.loader.done { opacity: 0; pointer-events: none; }
|
|
.loader .title { font-size: 20px; font-weight: 600; }
|
|
.progress { width: min(360px, 80vw); height: 6px; border-radius: 3px; background: #2d3036; overflow: hidden; }
|
|
#bar { width: 0; height: 100%; background: #6e9bf5; transition: width 0.1s; }
|
|
#bar.indeterminate { width: 30%; animation: slide 1s ease-in-out infinite alternate; }
|
|
@keyframes slide { from { margin-left: 0; } to { margin-left: 70%; } }
|
|
#status { color: #9a9890; font-size: 13px; }
|
|
.loader.failed #bar { background: #f0776c; }
|
|
#error { max-width: min(640px, 90vw); max-height: 40vh; overflow: auto; margin: 0; padding: 10px 12px; white-space: pre-wrap; color: #f0776c; background: #1d1f23; border-radius: 6px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; }
|
|
#fullscreen { position: fixed; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 18px; cursor: pointer; opacity: 0.5; }
|
|
#fullscreen:hover { opacity: 1; }
|
|
</style>
|
|
<link rel="preload" href="game.wasm?v={{.Build}}" as="fetch" type="application/wasm" crossorigin>
|
|
</head>
|
|
<body>
|
|
<canvas id="game" data-aego tabindex="0" aria-label="{{.Title}}"></canvas>
|
|
<div id="loader" class="loader" role="status" aria-live="polite">
|
|
<div class="title">{{.Title}}</div>
|
|
<div class="progress"><div id="bar"></div></div>
|
|
<div id="status">Loading…</div>
|
|
<pre id="error" hidden></pre>
|
|
</div>
|
|
<button id="fullscreen" type="button" title="Fullscreen" aria-label="Fullscreen" hidden>⛶</button>
|
|
<script src="wasm_exec.js?v={{.Build}}"></script>
|
|
<script src="loader.js?v={{.Build}}"></script>
|
|
</body>
|
|
</html>
|