AkurAI-Mail / app/webmail/index.html

Latest change 3af23b0e937520000e1aa43c7e2eb9de2675abd1 - OLI-248: webmail list and reader as framework islands on a signals store by Ólafur Búi Ólafsson

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Webmail · AkurAI Mail</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="/webmail/webmail.css" />
    <script>(function () {
      try {
        var m = document.cookie.match(/(?:^|; )akurai-theme=([^;]*)/);
        var t = (m ? decodeURIComponent(m[1]) : null) || localStorage.getItem("akurai-theme");
        if (!t) t = matchMedia("(prefers-color-scheme: light)").matches ? "akurai-light" : "akurai";
        document.documentElement.setAttribute("data-theme", t);
      } catch (e) {}
    })();</script>
    <script type="module" src="/theme.js"></script>
    <script type="module">
      import { initClientLogging } from "/monitor-client.js";
      initClientLogging({ app: "akurai-mail-ui" });
    </script>
    <script type="module" src="/src/framework/webmail.js"></script>
  </head>
  <body>
    <!-- The page is static markup; islands.js hydrates the data-island regions once the session is known. -->
    <main class="webmail-shell">
      <aside class="platform-rail" data-island="webmail-rail">
        <a class="brand" href="/" aria-label="AkurAI Mail home"><span class="mark">A</span><span><strong>AkurAI Mail</strong></span></a>
      </aside>

      <section class="mail-app" aria-busy="true">
        <div class="sync-root" data-island="sync-banner"></div>
        <header class="mail-topbar" data-island="webmail-topbar">
          <div class="identity"><span class="eyebrow">Mailbox</span><strong>AkurAI Webmail</strong></div>
        </header>

        <div class="mail-canvas" data-island="mail-canvas">
          <div data-island="message-list" style="display: contents">
            <aside class="folder-column" aria-label="Mail folders" data-folders></aside>
            <section class="message-column" aria-label="Message list" data-messages></section>
          </div>
          <section class="reader-column" aria-label="Message reader" data-island="message-reader"></section>
        </div>
      </section>

      <div data-island="compose-dialog"></div>
      <div data-island="settings-drawer"></div>
      <div data-island="webmail-overlays"></div>
    </main>
  </body>
</html>