Spaces:
Running
Running
File size: 4,997 Bytes
d511c9b 5c701a1 d511c9b 5c701a1 d511c9b 5c701a1 d511c9b 5c701a1 d511c9b 5c701a1 d511c9b 5c701a1 d511c9b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>SZL Energy — Holographic Ops · a11oy</title>
<!-- SPDX-License-Identifier: Apache-2.0
© 2026 Lutar, Stephen P. Jr. — SZL Holdings · ORCID 0009-0001-0110-4173 · Doctrine v11
0 runtime CDN. Every 3D lib is vendored in-image and served same-origin via the
/static/3d/vendor/... importmap below. System fonts only. Every value on screen is
wired to a real a11oy energy endpoint and carries its honesty chip — nothing here
fabricates joules, FLOPs, tokens, or dollars. -->
<script type="importmap">
{
"imports": {
"three": "/static/3d/vendor/three/three.module.min.js",
"three/webgpu": "/static/3d/vendor/three/three.webgpu.min.js",
"three/addons/": "/static/3d/vendor/three/addons/"
}
}
</script>
<style>
:root{--bg:#05070d;--panel:#0b121b;--line:#1b2734;--teal:#39d3c4;--gold:#e8c074;--green:#2fd07a;--cream:#eef3f6;--para:#9fb1bf;}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* Flex column so the 3D stage always fills whatever space the header leaves,
no matter how far the badges/links wrap on a narrow phone. dvh tracks the mobile
address-bar collapse; svh/100vh are fallbacks for older engines. */
body{background:var(--bg);color:var(--cream);font:14px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100svh;height:100dvh}
header{padding:10px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#08101a,#05070d);
display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto}
h1{font-size:16px;margin:0;letter-spacing:.4px}
.badge{display:inline-block;font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 7px;border-radius:6px;
border:1px solid var(--line);color:var(--gold);background:#10171f;white-space:nowrap}
#backend{color:var(--teal)}
#count{color:var(--green)}
#stage-wrap{position:relative;flex:1 1 auto;min-height:0;width:100%}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
text-align:center;color:var(--para);padding:24px;font:13px ui-monospace,monospace}
a{color:var(--teal);text-decoration:none}
/* ---- Mobile / touch (<=640px) ---------------------------------------- */
@media (max-width:640px){
header{padding:8px 12px;gap:8px}
h1{font-size:14px;flex:1 1 100%}
.badge{font-size:9.5px;padding:2px 6px}
/* Give the 3D stage a guaranteed usable share of the screen on phones. */
#stage-wrap{min-height:52vh}
}
@media (max-width:640px) and (orientation:landscape){
#stage-wrap{min-height:60vh}
}
</style>
</head>
<body>
<header>
<h1>⚡ SZL Energy — Holographic Ops</h1>
<span class="badge" id="backend">renderer: …</span>
<span class="badge">three r<span id="three-rev">…</span></span>
<span class="badge" id="count">… live 3D graphs</span>
<span class="badge">0 runtime CDN</span>
<span class="badge">Λ = Conjecture 1 · sovereign=false</span>
<a href="/holographic" style="margin-left:auto;font:11px ui-monospace,monospace">holographic estate →</a>
<a href="/" style="font:11px ui-monospace,monospace">← a11oy</a>
</header>
<div id="stage-wrap">
<div id="stage"></div>
<div id="fallback">3D unavailable on this device — needs a WebGL2 or WebGPU canvas.<br>
All underlying data is still available as JSON at the per-graph a11oy energy endpoints.</div>
</div>
<script type="module">
import szl3d from "/static/3d/szl3d/szl3d_boot.js";
import * as live from "/static/3d/szl3d/szl3d_live.js";
import * as label from "/static/3d/szl3d/szl3d_label.js";
import * as THREE from "three";
import { buildShowcase } from "/static/3d/energy_showcase/showcase.js";
const stageEl = document.getElementById("stage");
const fallbackEl = document.getElementById("fallback");
document.getElementById("three-rev").textContent = THREE.REVISION;
let stage = null, showcase = null;
async function boot() {
try {
stage = await szl3d.boot(stageEl, { bloom: { strength: 0.85, radius: 0.5, threshold: 0.18 }, cameraPos: [0, 5, 22] });
document.getElementById("backend").textContent = "renderer: " + stage.backend.toUpperCase();
stage.start();
} catch (e) {
fallbackEl.style.display = "flex";
document.getElementById("backend").textContent = "renderer: UNAVAILABLE";
console.error("[energy-holographic] stage boot failed:", e);
return;
}
const ctx = { stage, container: stageEl, live, label, THREE, szl3d };
showcase = buildShowcase(ctx);
document.getElementById("count").textContent = showcase.count + " live 3D graphs";
window.__SZL_ENERGY_SHOWCASE__ = showcase;
}
window.addEventListener("beforeunload", () => { try { if (showcase) showcase.dispose(); } catch (_) {} });
boot();
</script>
</body>
</html>
|