<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>spinner cost</title>
<style>
 body{margin:0;background:#161b22;color:#e6edf3;font:12px monospace;padding:16px}
 .grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
 .cell{width:32px;height:32px}
 .cell iframe{width:32px;height:32px;border:0;background:transparent}
 #out{margin-top:14px;color:#00b8b0;white-space:pre}
</style></head>
<body>
<div>orbital loader at 32x32, N instances</div>
<div class="grid" id="grid"></div>
<div id="out">measuring...</div>
<script>
var N = parseInt(new URLSearchParams(location.search).get('n')||'1',10);
var FPS = new URLSearchParams(location.search).get('fps');
var grid=document.getElementById('grid');
for(var i=0;i<N;i++){
  var c=document.createElement('div'); c.className='cell';
  var f=document.createElement('iframe');
  var M=new URLSearchParams(location.search).get('mode');
  f.src='loader.html?bg=transparent&intro=0'+(FPS?('&fps='+FPS):'')+(M?('&mode='+M):'');
  c.appendChild(f); grid.appendChild(c);
}
</script>
</body></html>