<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- PWA Meta Tags - Dynamic theme-color for status bar immersion -->
    <meta name="theme-color" content="#fce7f3" id="theme-color-light" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#0f172a" id="theme-color-dark" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#fce7f3" id="theme-color-generic" />
    <meta name="description" content="一个精致的互动式属性卡片创建与分享工具，支持多主题、多卡片模板、URL 分享和高清导出" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="SPANK CARD" />
    <meta name="mobile-web-app-capable" content="yes" />
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="/icon-192.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/icon-192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/icon-512.png" />
    
    <title>SPANK CARD - 我的属性填涂卡</title>
    <style>
      /* 禁用 iOS 双击缩放，但保留捏合缩放 */
      * {
        touch-action: manipulation;
      }
      
      /* iOS Safari 状态栏透明支持 */
      :root {
        /* 安全区域变量 */
        --sat: env(safe-area-inset-top);
        --sab: env(safe-area-inset-bottom);
        --sal: env(safe-area-inset-left);
        --sar: env(safe-area-inset-right);
      }
      
      /* 确保内容延伸到整个屏幕 */
      html {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      
      body {
        width: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding: 0;
        margin: 0;
        /* 不要在 body 上添加 padding，让内容延伸到顶部 */
      }
      
      #root {
        width: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-DGWUawFd.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-8gG5XEHR.css">
  </head>
  <body>
    <div id="root"></div>
    <script>
      // 必须在 ES module 加载之前捕获 beforeinstallprompt
      // Chrome 可能在模块脚本执行前就触发此事件
      window.__pwaInstallEvent = null;
      window.addEventListener('beforeinstallprompt', function(e) {
        e.preventDefault();
        window.__pwaInstallEvent = e;
        console.log('💾 beforeinstallprompt captured (inline)');
      });
    </script>
  </body>
</html>
