index.html

<!doctype html>
<html lang="zh-CN" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/串口助手_64.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- SEO Meta Tags -->
    <title>波特律动 串口助手 - 直接在浏览器使用的串口调试工具</title>
    <meta
      name="description"
      content="波特律动串口助手是一款直接在浏览器使用的串口调试工具，支持串口通信、数据收发、协议解析。无需安装，浏览器直接使用，适用于嵌入式开发、硬件调试、物联网设备测试。"
    />
    <meta
      name="keywords"
      content="串口助手,串口调试,串口工具,Web串口,串口通信,硬件调试,嵌入式开发,物联网,串口监控,数据收发"
    />
    <meta name="author" content="波特律动" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="zh-CN" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://serial.baud-dance.com/" />
    <meta property="og:title" content="波特律动 串口助手 - 直接在浏览器使用的串口调试工具" />
    <meta
      property="og:description"
      content="波特律动串口助手是一款直接在浏览器使用的串口调试工具，支持串口通信、数据收发、协议解析。无需安装，浏览器直接使用，适用于嵌入式开发、硬件调试、物联网设备测试。"
    />
    <meta property="og:image" content="https://serial.baud-dance.com/serial.svg" />
    <meta property="og:site_name" content="波特律动串口助手" />
    <meta property="og:locale" content="zh_CN" />

    <!-- GitHub Social -->
    <meta name="github:card" content="summary_large_image" />
    <meta name="github:url" content="https://github.com/BaudDance/SerialAssistant" />
    <meta name="github:title" content="波特律动 串口助手 - 直接在浏览器使用的串口调试工具" />
    <meta
      name="github:description"
      content="波特律动串口助手是一款直接在浏览器使用的串口调试工具，支持串口通信、数据收发、协议解析。无需安装，浏览器直接使用，适用于嵌入式开发、硬件调试、物联网设备测试。"
    />
    <meta name="github:image" content="https://serial.baud-dance.com/serial.svg" />

    <!-- Bilibili Social -->
    <meta name="bilibili:card" content="summary_large_image" />
    <meta name="bilibili:url" content="https://space.bilibili.com/6100925" />
    <meta name="bilibili:title" content="波特律动 串口助手 - 直接在浏览器使用的串口调试工具" />
    <meta
      name="bilibili:description"
      content="波特律动串口助手是一款直接在浏览器使用的串口调试工具，支持串口通信、数据收发、协议解析。无需安装，浏览器直接使用，适用于嵌入式开发、硬件调试、物联网设备测试。"
    />
    <meta name="bilibili:image" content="https://serial.baud-dance.com/serial.svg" />

    <!-- Additional SEO -->
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111827" />
    <meta name="msapplication-TileColor" content="#1f2937" />
    <meta name="application-name" content="波特律动串口助手" />
    <meta name="apple-mobile-web-app-title" content="串口助手" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://serial.baud-dance.com/" />

    <script>
      ;(() => {
        try {
          const mode = localStorage.getItem('vueuse-color-scheme') || 'auto'
          const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
          document.documentElement.classList.toggle('dark', mode === 'dark' || (mode === 'auto' && prefersDark))
        } catch (_) {}
      })()
    </script>

    <style>
      :root {
        color-scheme: light;
        --app-fallback-background: #ffffff;
        --app-fallback-foreground: #171717;
        --app-fallback-muted: #737373;
        --app-fallback-border: rgb(0 0 0 / 10%);
        --app-fallback-accent: #0ea5e9;
      }

      .dark {
        color-scheme: dark;
        --app-fallback-background: #111827;
        --app-fallback-foreground: #f8fafc;
        --app-fallback-muted: #cbd5e1;
        --app-fallback-border: rgb(255 255 255 / 12%);
        --app-fallback-accent: #38bdf8;
      }

      .app-fallback {
        min-height: 100svh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        color: var(--foreground, var(--app-fallback-foreground));
        background: var(--background, var(--app-fallback-background));
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          sans-serif;
      }

      .app-fallback__panel {
        width: min(100%, 320px);
        text-align: center;
      }

      .app-fallback__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .app-fallback__brand img {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgb(14 165 233 / 18%);
        animation: app-fallback-breathe 1.8s ease-in-out infinite;
      }

      .app-fallback__eyebrow {
        display: none;
      }

      .app-fallback h1 {
        margin: 0;
        font-size: 20px;
        line-height: 1.35;
        letter-spacing: 0;
      }

      .app-fallback p {
        margin: 8px 0 0;
        color: var(--muted-foreground, var(--app-fallback-muted));
        font-size: 14px;
        line-height: 1.6;
      }

      .app-fallback__status {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 18px;
      }

      .app-fallback__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 20px;
      }

      .app-fallback__dots span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--app-fallback-accent);
        opacity: 0.36;
        animation: app-fallback-dot 1.15s ease-in-out infinite;
      }

      .app-fallback__dots span:nth-child(2) {
        animation-delay: 0.16s;
      }

      .app-fallback__dots span:nth-child(3) {
        animation-delay: 0.32s;
      }

      @keyframes app-fallback-breathe {
        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.045);
        }
      }

      @keyframes app-fallback-dot {
        0%,
        100% {
          opacity: 0.32;
          transform: translateY(0);
        }

        50% {
          opacity: 1;
          transform: translateY(-4px);
        }
      }
    </style>

    <!-- Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "波特律动串口助手",
        "description": "波特律动串口助手是一款直接在浏览器使用的串口调试工具，支持串口通信、数据收发、协议解析。无需安装，浏览器直接使用，适用于嵌入式开发、硬件调试、物联网设备测试。",
        "url": "https://serial.baud-dance.com/",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "CNY"
        },
        "author": {
          "@type": "Organization",
          "name": "波特律动"
        }
      }
    </script>

    <link rel="manifest" href="/manifest.json" />
  </head>
  <body>
    <div id="app">
      <div class="app-fallback" role="status" aria-live="polite">
        <div class="app-fallback__panel">
          <div class="app-fallback__brand">
            <img src="/串口助手_64.png" alt="" aria-hidden="true" />
            <div>
              <p class="app-fallback__eyebrow">波特律动</p>
              <strong>串口助手</strong>
            </div>
          </div>
          <div class="app-fallback__status">
            <div class="app-fallback__dots" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div>
              <h1>启动中</h1>
            </div>
          </div>
        </div>
      </div>
      <noscript>
        <div class="app-fallback" role="alert">
          <div class="app-fallback__panel">
            <div class="app-fallback__brand">
              <img src="/串口助手_64.png" alt="" aria-hidden="true" />
              <div>
                <p class="app-fallback__eyebrow">波特律动</p>
                <strong>串口助手</strong>
              </div>
            </div>
            <h1>需要启用 JavaScript</h1>
            <p>请在浏览器设置中允许 JavaScript 后刷新页面。</p>
          </div>
        </div>
      </noscript>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>