<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="/favicon.ico" />
    <title>AI 视觉智能分析平台</title>
    <link rel="preload" as="image" href="/assets/logo-7XmrNV02.png" />
    <script>
      // 与应用 useDark 的存储键和默认值保持一致，在首屏绘制前恢复主题。
      (function () {
        var mode = 'dark';
        try {
          mode = localStorage.getItem('useDarkKey') || 'dark';
        } catch (_) {
          // 存储不可用时沿用默认深色。
        }
        var dark = mode !== 'light';
        if (mode === 'auto') dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.classList.toggle('dark', dark);
        document.documentElement.classList.toggle('light', !dark);
      })();
    </script>
    <!--[if lt IE 11
      ]><script>
        window.location.href = '/html/ie.html';
      </script><!
    [endif]-->
    <style>
      #loader-wrapper {
        color-scheme: dark;
        --loader-bg: #090d16;
        --loader-text: #f4f7fb;
        --loader-muted: #8994a7;
        --loader-track: rgba(255, 255, 255, 0.1);
        --loader-accent: #8aa8ff;
        --loader-accent-soft: rgba(138, 168, 255, 0.13);
      }

      html.light #loader-wrapper {
        color-scheme: light;
        --loader-bg: #f5f7fb;
        --loader-text: #1d2636;
        --loader-muted: #778196;
        --loader-track: rgba(40, 55, 80, 0.12);
        --loader-accent: #5278e8;
        --loader-accent-soft: rgba(82, 120, 232, 0.13);
      }

      html,
      body,
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #loader-wrapper {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: var(--loader-bg);
        opacity: 1;
        transition: opacity 250ms ease;
      }

      #loader-wrapper::before {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 42%, rgba(111, 143, 255, 0.1), transparent 34%);
        content: '';
        pointer-events: none;
      }

      .loaded #loader-wrapper {
        opacity: 0;
        pointer-events: none;
      }

      .loader-content {
        position: relative;
        display: flex;
        width: min(336px, calc(100vw - 48px));
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .loader-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 25px;
        object-fit: contain;
        filter: drop-shadow(0 12px 24px rgba(61, 91, 186, 0.24));
      }

      .loader-app-name {
        margin: 0 0 12px;
        color: var(--loader-muted);
        font-family: Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 13px;
        letter-spacing: 0.12em;
      }

      .loader-title {
        margin: 0;
        color: var(--loader-text);
        font-family: Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.08em;
      }

      .loader-status {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 13px 0 25px;
        color: var(--loader-muted);
        font-family: Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 12px;
        letter-spacing: 0.05em;
      }

      .loader-status::before {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--loader-accent);
        box-shadow: 0 0 0 4px var(--loader-accent-soft);
        content: '';
        animation: loader-pulse 1.6s ease-in-out infinite;
      }

      .loader-progress {
        position: relative;
        width: 100%;
        height: 1px;
        overflow: hidden;
        background: var(--loader-track);
      }

      .loader-progress::after {
        position: absolute;
        top: 0;
        left: -35%;
        width: 35%;
        height: 100%;
        background: linear-gradient(90deg, transparent, var(--loader-accent), transparent);
        content: '';
        animation: loader-progress 1.8s ease-in-out infinite;
      }

      @keyframes loader-progress {
        from { transform: translateX(0); }
        to { transform: translateX(385%); }
      }

      @keyframes loader-pulse {
        50% { opacity: 0.38; transform: scale(0.72); }
      }

      @media (prefers-reduced-motion: reduce) {
        #loader-wrapper,
        .loader-progress::after,
        .loader-status::before { animation: none; transition: none; }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-dv_ex9D8.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-B0xIX4LM.css">
  </head>

  <body>
    <div id="loader-wrapper" role="status" aria-live="polite" aria-label="正在加载系统资源">
      <div class="loader-content">
        <img class="loader-logo" src="/assets/logo-7XmrNV02.png" fetchpriority="high" alt="" />
        <p class="loader-app-name">AI 视觉智能分析平台</p>
        <p class="loader-title">正在加载系统资源</p>
        <p class="loader-status">正在准备工作环境，请稍候</p>
        <div class="loader-progress" aria-hidden="true"></div>
      </div>
    </div>
    <div id="app">
    </div>
  </body>
</html>
