app
Orbital Lab
Public Made by Adomby adom
The Adom logomark is a hydrogen 2p orbital: psi = (2p_x + 2p_y)/sqrt(2). A live Babylon.js lab that proves it (all 16 real spherical harmonics, the alignment cheat, and the directed loop), plus loader.html: the same animation as one dependency-free WebGL file for webview load screens.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loader resize proof</title>
<style>
:root{--bg:#0d1117;--surface:#161b22;--border:#30363d;--text:#e6edf3;--text-2:#8b949e;--accent:#00b8b0}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Satoshi',system-ui,sans-serif;padding:18px}
h1{font-size:16px;margin:0 0 4px}
p{font-size:12.5px;color:var(--text-2);margin:0 0 12px;max-width:720px;line-height:1.6}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
button{font-family:inherit;font-weight:500;font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer;
background:#21262d;border:1px solid var(--border);color:var(--text)}
button:hover{border-color:var(--accent)}
#box{overflow:hidden;position:relative;width:760px;height:475px;min-width:120px;min-height:80px;
border:1px dashed var(--border);border-radius:10px;transition:width .35s ease,height .35s ease;background:#0d1117}
/* custom handle ABOVE the iframe: the native resize grip sat underneath it,
so drags fought the loader for the pointer and felt broken */
#grip{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;cursor:nwse-resize;z-index:5;
border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);border-radius:0 0 8px 0}
#box.notrans{transition:none}
#box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#ro{font-family:ui-monospace,monospace;font-size:11px;color:var(--accent);margin-top:8px}
</style>
</head>
<body>
<h1>loader.html resize proof</h1>
<p>The dashed box is a live container around the real loader. Drag its lower-right corner
yourself, run the presets, or run the tour. The loader must fill whatever it is given:
portrait, landscape, square, tiny, huge, and it must keep the mark framed by its
limiting axis the whole time. Grab the OS window edge too, the page reflows with it.</p>
<div class="acts">
<button data-s="300,620">Tall</button>
<button data-s="1100,300">Wide</button>
<button data-s="420,420">Square</button>
<button data-s="180,140">Tiny</button>
<button data-s="1300,700">Huge</button>
<button data-s="760,475">Reset</button>
<button id="tour">Tour (animated)</button>
<span style="width:14px"></span>
<button data-m="0">margin 0%</button>
<button data-m="40">margin 40%</button>
<button data-m="80">margin 80%</button>
</div>
<div id="box"><iframe src="loader.html?interact=1"></iframe><div id="grip" title="drag to resize"></div></div>
<div id="ro">container: …</div>
<script>
var box=document.getElementById('box'), ro=document.getElementById('ro');
document.querySelectorAll('button[data-s]').forEach(function(b){
b.addEventListener('click',function(){
var s=b.getAttribute('data-s').split(',');
box.style.width=s[0]+'px'; box.style.height=s[1]+'px';
});
});
document.getElementById('tour').addEventListener('click',function(){
var steps=[[300,620],[1100,300],[420,420],[180,140],[1300,700],[760,475]], i=0;
(function next(){ if(i>=steps.length) return;
box.style.width=steps[i][0]+'px'; box.style.height=steps[i][1]+'px';
i++; setTimeout(next,1100); })();
});
document.querySelectorAll('button[data-m]').forEach(function(b){
b.addEventListener('click',function(){
box.querySelector('iframe').src='loader.html?interact=1&margin='+b.getAttribute('data-m');
});
});
var grip=document.getElementById('grip'), drag=null;
grip.addEventListener('pointerdown',function(e){
e.preventDefault(); grip.setPointerCapture(e.pointerId);
box.classList.add('notrans');
drag={x:e.clientX,y:e.clientY,w:box.clientWidth,h:box.clientHeight};
});
grip.addEventListener('pointermove',function(e){
if(!drag) return;
box.style.width=Math.max(120,drag.w+e.clientX-drag.x)+'px';
box.style.height=Math.max(80,drag.h+e.clientY-drag.y)+'px';
});
grip.addEventListener('pointerup',function(){ drag=null; box.classList.remove('notrans'); });
setInterval(function(){
var f=box.querySelector('iframe'), w=f.contentWindow;
ro.textContent='container: '+box.clientWidth+'x'+box.clientHeight+
' · loader viewport: '+(w&&w.W?w.W+'x'+w.H:'…')+
' · gl buffer: '+(w&&w.gl?w.gl.drawingBufferWidth+'x'+w.gl.drawingBufferHeight:'…');
},250);
</script>
</body>
</html>