cad-editor/index.html

80 lines
3 KiB
HTML
Raw Normal View History

<!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>
<link data-trunk rel="icon" href="assets/logo.svg" />
<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. The crate has no Cargo features:
the geometry kernel is pure Rust, so the web build gets the same
solid modelling the native one does. See issue #45. -->
<link data-trunk rel="rust" data-bin="OpenCADStudio" />
<!-- Per-script Noto subsets, fetched lazily at runtime (one alphabet per
file) so CAD text renders non-Latin scripts on the web. (#141) -->
<link data-trunk rel="copy-dir" href="web/fonts" />
2026-07-25 18:49:18 +03:00
<link data-trunk rel="copy-file" href="web/ocs-parse-worker.js" />
<link data-trunk rel="copy-file" href="web/discussions.json" />
<link data-trunk rel="copy-file" href="web/videos.json" />
</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>