AkurAI-Monitor / ui/index.html

Latest change fb5802baea214ebb9f996729138b534546fb7581 - theme: update to suite-wide theme-sync (cookie + BroadcastChannel) by Olafur Bui

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AkurAI Monitor</title>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <meta name="theme-color" content="#0a0c11">
  <!-- App styles first, then theme token overrides -->
  <link rel="stylesheet" href="/style.css?v=9">
  <!-- Named multi-theme tokens (:root[data-theme]); must come after style.css
       so the active theme's values win. -->
  <link rel="stylesheet" href="/themes.css?v=9">
  <!-- Flash-guard: set the active theme before first paint to avoid a FOUC. -->
  <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?v=9"></script>
</head>
<body>
  <header>
    <a class="brand" href="#/">
      <span class="brand-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="currentColor" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.38 3.23c1.05-2.23 4.19-2.23 5.24 0l11.05 23.62A2.91 2.91 0 0 1 27.03 31h-3.42c-1.17 0-2.22-.7-2.67-1.78l-2.05-4.93h-5.78l-2.05 4.93A2.9 2.9 0 0 1 8.39 31H4.97a2.91 2.91 0 0 1-2.64-4.15L13.38 3.23ZM16 11.17l-5.13 13.1h10.26L16 11.17Z"/><path d="M10.38 20.54h11.24a2.23 2.23 0 0 1 0 4.46H10.38a2.23 2.23 0 0 1 0-4.46Z"/></svg></span>
      <span>Akur<b>AI</b> Monitor</span>
    </a>
    <nav>
      <a href="#/" class="active" data-page="dashboard">Dashboard</a>
      <a href="#/logs" data-page="logs">Logs</a>
      <a href="#/alerts" data-page="alerts">Alerts</a>
      <span class="theme-picker" data-theme-picker></span>
    </nav>
  </header>
  <main id="app"></main>
  <script src="/app.js?v=9"></script>
</body>
</html>