55 lines
2.2 KiB
HTML
55 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,maximum-scale=1,user-scalable=no">
|
|
<title>sx</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{width:100%;height:100%;overflow:hidden;background:#1e1e24}
|
|
canvas{display:block;width:100vw;height:100vh;outline:none}
|
|
#overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e1e24;z-index:10;transition:opacity .4s}
|
|
#overlay.hidden{opacity:0;pointer-events:none}
|
|
#overlay .bar-track{width:min(280px,60vw);height:3px;background:#2a2a32;border-radius:2px;margin-top:18px}
|
|
#overlay .bar-fill{height:100%;width:0%;background:#7c7cff;border-radius:2px;transition:width .15s}
|
|
#overlay .status{color:#888;font:13px/1 -apple-system,system-ui,sans-serif;margin-top:10px;letter-spacing:.02em}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="overlay">
|
|
<div class="bar-track"><div class="bar-fill" id="bar"></div></div>
|
|
<div class="status" id="status">Loading…</div>
|
|
</div>
|
|
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
|
|
<script>
|
|
var c=document.getElementById('canvas');
|
|
var dpr=window.devicePixelRatio||1;
|
|
c.width=window.innerWidth*dpr;
|
|
c.height=window.innerHeight*dpr;
|
|
|
|
var bar=document.getElementById('bar');
|
|
var status=document.getElementById('status');
|
|
var overlay=document.getElementById('overlay');
|
|
var Module={
|
|
canvas:c,
|
|
print:function(){console.log(Array.prototype.slice.call(arguments).join(' '))},
|
|
printErr:function(){console.warn(Array.prototype.slice.call(arguments).join(' '))},
|
|
setStatus:function(t){
|
|
if(!t){overlay.classList.add('hidden');return}
|
|
var m=t.match(/\((\d+(?:\.\d+)?)\/(\d+)\)/);
|
|
if(m){bar.style.width=(parseInt(m[1])/parseInt(m[2])*100)+'%';status.textContent='Loading\u2026'}
|
|
else{status.textContent=t}
|
|
},
|
|
totalDependencies:0,
|
|
monitorRunDependencies:function(left){
|
|
this.totalDependencies=Math.max(this.totalDependencies,left);
|
|
this.setStatus(left?'Loading... ('+( this.totalDependencies-left)+'/'+this.totalDependencies+')':'');
|
|
}
|
|
};
|
|
Module.setStatus('Loading\u2026');
|
|
window.onerror=function(){Module.setStatus('Error \u2014 see console');};
|
|
</script>
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html>
|