5b86274f13
Show a centered spinner + title until the app's canvas mounts, then fade it out — the wasm bundle takes a moment to download and start. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
72 lines
2.5 KiB
HTML
72 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Open CAD Studio</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1e1e1e; }
|
|
canvas { display: block; }
|
|
|
|
/* Splash shown while the wasm bundle downloads and initializes. Removed
|
|
once the app's canvas appears (see the observer script below). */
|
|
#loading {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 22px;
|
|
background: #1e1e1e;
|
|
color: #cfcfcf;
|
|
font-family: system-ui, sans-serif;
|
|
z-index: 9999;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
#loading.hide { opacity: 0; pointer-events: none; }
|
|
#loading .title { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
|
|
#loading .title span { color: #3399e6; }
|
|
#loading .sub { font-size: 12px; color: #777; }
|
|
#loading .spinner {
|
|
width: 46px;
|
|
height: 46px;
|
|
border: 4px solid #2e2e2e;
|
|
border-top-color: #3399e6;
|
|
border-radius: 50%;
|
|
animation: ocs-spin 0.9s linear infinite;
|
|
}
|
|
@keyframes ocs-spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
<!-- Trunk builds the wasm32 binary without the `solid3d` feature (no 3-D
|
|
solid kernel / vtkio C deps on the web). See issue #45. -->
|
|
<link data-trunk rel="rust" data-bin="OpenCADStudio" data-cargo-no-default-features />
|
|
</head>
|
|
<body>
|
|
<div id="loading">
|
|
<div class="spinner"></div>
|
|
<div class="title">Open <span>CAD</span> Studio</div>
|
|
<div class="sub">Loading…</div>
|
|
</div>
|
|
<script>
|
|
// The app mounts a <canvas> into <body> when it's ready. Watch for it and
|
|
// fade the splash out.
|
|
(function () {
|
|
const splash = document.getElementById("loading");
|
|
const done = () => {
|
|
if (!splash) return;
|
|
splash.classList.add("hide");
|
|
setTimeout(() => splash.remove(), 450);
|
|
};
|
|
if (document.querySelector("canvas")) return done();
|
|
const obs = new MutationObserver(() => {
|
|
if (document.querySelector("canvas")) {
|
|
obs.disconnect();
|
|
done();
|
|
}
|
|
});
|
|
obs.observe(document.body, { childList: true, subtree: true });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|