Recordly/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/app-icons/recordly-32.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recordly</title>
    <script>
      // Paint the editor shell before the renderer bundle is downloaded or evaluated.
      // Keep recording overlays transparent during their own startup.
      document.documentElement.dataset.windowType =
        new URLSearchParams(location.search).get("windowType") || "";
      if (document.documentElement.dataset.windowType === "editor") {
        let preference = "system";
        try {
          preference = window.electronAPI?.getAppSetting("recordly.theme") ||
            localStorage.getItem("recordly.theme") || "system";
        } catch {}
        document.documentElement.dataset.theme =
          preference === "dark" ||
          (preference !== "light" && matchMedia("(prefers-color-scheme: dark)").matches)
            ? "dark" : "light";
      }
    </script>
    <style>
      .boot-shell { display: none; }
      html[data-window-type="editor"] { background: #f6f6f7; }
      html[data-window-type="editor"][data-theme="dark"] { background: #171719; }
      html[data-window-type="editor"] .boot-shell {
        --boot-block: #e5e5e9;
        position: fixed; inset: 0; display: flex; flex-direction: column;
        padding: 0 20px 20px; gap: 16px; box-sizing: border-box;
        background: #f6f6f7; overflow: hidden;
      }
      html[data-theme="dark"] .boot-shell { --boot-block: #303034; background: #171719; }
      .boot-shell i { display: block; background: var(--boot-block); border-radius: 8px; }
      .boot-header { height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
      .boot-header i { width: 96px; height: 28px; }
      .boot-header i:nth-child(2) { width: 144px; height: 16px; }
      .boot-body { display: flex; flex: 1; min-height: 0; gap: 20px; }
      .boot-rail { width: 28px; display: flex; flex-direction: column; gap: 16px; }
      .boot-rail i { height: 32px; flex-shrink: 0; }
      .boot-settings { width: min(28vw, 320px); padding: 20px; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; }
      .boot-settings i { height: 20px; }
      .boot-settings i:nth-child(3) { height: 140px; }
      .boot-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
      .boot-preview i:first-child { flex: 1; }
      .boot-preview i:last-child { width: 160px; height: 32px; margin: auto; border-radius: 20px; }
      .boot-timeline { height: 22vh; min-height: 140px; max-height: 240px; display: flex; flex-direction: column; gap: 14px; }
      .boot-timeline i { height: 24px; width: 240px; }
      .boot-timeline i:nth-child(2) { height: 12px; width: 100%; }
      .boot-timeline i:nth-child(3) { height: 54px; width: 80%; }
      .boot-timeline i:nth-child(4) { width: 33%; }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="boot-shell" role="status" aria-label="Loading editor" aria-busy="true">
        <div class="boot-header" aria-hidden="true"><i></i><i></i><i></i></div>
        <div class="boot-body" aria-hidden="true">
          <div class="boot-rail"><i></i><i></i><i></i><i></i><i></i><i></i></div>
          <div class="boot-settings"><i></i><i></i><i></i><i></i><i></i></div>
          <div class="boot-preview"><i></i><i></i></div>
        </div>
        <div class="boot-timeline" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>