dbx/apps/desktop/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/connection-dialog-legacy.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DBX</title>
    <style>
      html,
      body,
      #root {
        background-color: rgb(255 255 255);
      }

      body {
        margin: 0;
      }

      html.dark,
      html.dark body,
      html.dark #root {
        background-color: rgb(19 20 22);
      }

      #startup-loading {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        font:
          14px system-ui,
          sans-serif;
      }

      #startup-loading .startup-brand {
        color: #111827;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.5px;
      }

      html.dark #startup-loading .startup-brand {
        color: #f3f4f6;
      }

      #startup-loading .startup-spinner {
        width: 22px;
        height: 22px;
        box-sizing: border-box;
        border: 2px solid rgba(107, 114, 128, 0.22);
        border-top-color: currentColor;
        border-radius: 999px;
        animation: dbx-startup-spin 0.8s linear infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        #startup-loading .startup-spinner {
          animation: none;
        }
      }

      @keyframes dbx-startup-spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
    <script data-dbx-startup-theme>
      (() => {
        const root = document.documentElement;
        let mode = null;
        let cornerStyle = null;

        // localStorage can throw when WebView storage is unavailable; keep the existing light fallback.
        try {
          mode = localStorage.getItem("dbx-theme");
          cornerStyle = localStorage.getItem("dbx-corner-style");
        } catch {}

        const followsSystem = mode === "system" || mode === "soft-system";
        let dark = mode === "dark" || mode === "soft-dark";

        if (followsSystem) {
          try {
            dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
          } catch {
            dark = false;
          }
        }

        root.classList.toggle("dark", dark);
        root.dataset.cornerStyle = cornerStyle === "none" || cornerStyle === "small" ? cornerStyle : "large";
        root.style.colorScheme = dark ? "dark" : "light";
      })();
    </script>
    <script data-dbx-startup-input-guard>
      (() => {
        const readyEvent = "dbx:startup-ready";
        const preventStartupEscape = (event) => {
          if (event.key !== "Escape") return;
          event.preventDefault();
          event.stopImmediatePropagation();
        };

        window.addEventListener("keydown", preventStartupEscape, true);
        window.addEventListener(
          readyEvent,
          () => {
            window.removeEventListener("keydown", preventStartupEscape, true);
          },
          { once: true },
        );
      })();
    </script>
  </head>
  <body>
    <div id="root">
      <div id="startup-loading" role="status" aria-live="polite" aria-busy="true">
        <span class="startup-brand" aria-hidden="true">DBX</span>
        <span class="startup-spinner" aria-hidden="true"></span>
        <span>Loading…</span>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>