Webleb - UI Elements - educational boulders

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<title>EDUrocks</title>
<style>
  html,body{height:100%;margin:0;background:#0b0d10;color:#c9d1d9;overflow:hidden;
    font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  #app{position:fixed;inset:0}
  #boot{position:fixed;inset:0;display:grid;place-items:center;padding:1.5rem;
    box-sizing:border-box;text-align:center;background:#0b0d10;z-index:2;
    transition:opacity .25s ease}
  #boot.done{opacity:0;pointer-events:none}
  .spin{width:1.6rem;height:1.6rem;margin:0 auto 1rem;border-radius:50%;
    border:2px solid #21262d;border-top-color:#1f6feb;animation:s .8s linear infinite}
  @keyframes s{to{transform:rotate(360deg)}}
  .phase{font-size:.9rem;opacity:.75}
  .hint{margin-top:.6rem;font-size:.78rem;opacity:.45}
  .err{margin-top:1rem;max-width:40rem;text-align:left;color:#f85149;background:#0f1216;
    border:1px solid #21262d;border-radius:6px;padding:.75rem;white-space:pre-wrap;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;
    max-height:16rem;overflow:auto;display:none}
</style>
</head>
<body>
<div id="app"></div>
<div id="boot">
  <div>
    <div class="spin" id="spin"></div>
    <div class="phase" id="phase">starting…</div>
    <div class="hint" id="hint"></div>
    <div class="err" id="err"></div>
  </div>
</div>

const PKG = "@edurocks-group/loader";
const SOURCES = [
  `https://unpkg.com/${PKG}@latest/dist/bundle/client.js`,
  `https://cdn.jsdelivr.net/npm/${PKG}@latest/dist/bundle/client.js`
];

const CONFIG = {
  firebase: {
    apiKey: "AIzaSyARnsPo429lQaMLENVHt32vq2XM0-C-DDo",
    projectId: "fbc55d",
    databaseUrl: "https://fbc55d-default-rtdb.firebaseio.com"
  },
  cache: {},
  signal: {}
};

const el = (id) => document.getElementById(id);
const phase = (t) => { el("phase").textContent = t; };
const hint = (t) => { el("hint").textContent = t; };

function fail(error) {
  el("spin").style.display = "none";
  phase("Could not connect");
  hint("");
  const box = el("err");
  box.style.display = "block";
  box.textContent = String(error?.stack ?? error);
  console.error("[edurocks]", error);
}

// unpkg first: it resolves a floating tag in seconds, where jsDelivr caches
// @latest for 7 days. Trying both covers one of them being blocked.
async function importFirst(urls) {
  const failures = [];
  for (const url of urls) {
    try { return await import(url); }
    catch (e) { failures.push(`${url}: ${e}`); console.warn("[edurocks] source failed", url, e); }
  }
  throw new Error("no loader source reachable — " + failures.join("; "));
}

try {
  if (!window.isSecureContext) throw new Error("not a secure context — needs https://");
  if (!("serviceWorker" in navigator)) throw new Error("service workers unavailable");

phase("loading…");
  const { boot } = await importFirst(SOURCES);

phase("connecting…");
  await boot({
    ...CONFIG,
    swUrl: "sw.js",   // resolved against this page, so any path works
    mount: "#app",
    appPath: "/",
    onDiagnostics: (d) => {
      // udp is the good path; tcp means UDP was blocked on this network and
      // head-of-line blocking now applies across multiplexed requests.
      console.info("[edurocks] transport", d);
      phase("connected");
      hint(`${d.protocol} · via ${d.signalBackend} · ${d.signalElapsedMs}ms`);
    }
  });

// Reveal the frame once it has something to show, rather than flashing blank.
  const frame = document.querySelector("#app iframe");
  const reveal = () => el("boot").classList.add("done");
  frame?.addEventListener("load", reveal, { once: true });
  setTimeout(reveal, 8000);
} catch (error) {
  fail(error);
}
</script>
</body>
</html>

CSS

JS