index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Only directives that are safe to inherit. A srcdoc iframe inherits the
         embedder's CSP and sandboxing does not sever that, so any script-src
         here would kill the generated app's inline scripts and the Tailwind CDN
         (and script-src 'self' would additionally break the dev server, whose
         React-Refresh preamble is inlined). frame-ancestors is ignored in a
         meta tag -- it is set as a real header in vite.config.js.
         base-uri allows only about: so the preview bridge can pin a srcdoc
         frame's base to about:srcdoc (dead links become no-ops instead of
         navigating the frame to this origin); no web origin is permitted. -->
    <meta http-equiv="Content-Security-Policy" content="base-uri about:; object-src 'none'" />
    <link rel="icon" href="/favicon.ico" sizes="48x48" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
    <meta name="theme-color" content="#080808" />
    <!-- Resolve the theme and chat font size before first paint so there is no
         light/small flash. Inline is required (it must run before the deferred
         module bundle); the meta CSP above sets no script-src, so inline scripts
         are allowed. Kept in sync with THEME_KEY / THEME_META_COLOR in
         src/lib/config.js. -->
    <script>
      (function () {
        try {
          var pref = localStorage.getItem('orion-theme');
          // Dark unless the user explicitly chose light (or system on a light OS).
          var dark =
            pref === 'system'
              ? window.matchMedia('(prefers-color-scheme: dark)').matches
              : pref !== 'light';
          document.documentElement.classList.toggle('dark', dark);
          var meta = document.querySelector('meta[name="theme-color"]');
          if (meta) meta.setAttribute('content', dark ? '#080808' : '#f1f3f5');
          var font = localStorage.getItem('orion-chat-font');
          if (font === 'small' || font === 'large' || font === 'xlarge') {
            document.documentElement.dataset.chatFont = font;
          }
        } catch (e) {
          /* storage blocked -- fall back to the dark theme and default sizes */
          document.documentElement.classList.add('dark');
        }
      })();
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
    <title>AppBlips</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>