<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="description" content="<%- description %>" />
    <meta name="keywords" content="考培练,智能学习,在线教育,AI陪练" />
    <meta name="author" content="考培练系统" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="<%- title %>" />
    <meta property="og:description" content="<%- description %>" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="<%- title %>" />
    <meta property="twitter:description" content="<%- description %>" />
    
    <!-- 防止页面缩放 -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- PWA 相关 -->
    <meta name="theme-color" content="#667eea" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="<%- title %>" />
    
    <!-- 内容安全策略：自动升级不安全请求为HTTPS -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
    
    <title><%- title %></title>
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- 页面加载动画样式 -->
    <style>
      #loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      
      .loading-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        animation: pulse 2s infinite;
      }
      
      .loading-text {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 30px;
      }
      
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.05); opacity: 0.8; }
      }
      
      .fade-out {
        opacity: 0;
        transition: opacity 0.5s ease-out;
      }
    </style>
  </head>
  <body>
    <!-- 页面加载动画 -->
    <div id="loading">
      <div class="loading-logo">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" />
        </svg>
      </div>
      <div class="loading-text">考培练系统</div>
      <div class="loading-spinner"></div>
    </div>
    
    <!-- 应用容器 -->
    <div id="app"></div>
    
    <!-- 不支持 JavaScript 的提示 -->
    <noscript>
      <div style="text-align: center; padding: 50px; font-family: Arial, sans-serif;">
        <h2>需要启用 JavaScript</h2>
        <p>请启用浏览器的 JavaScript 功能以正常使用本系统。</p>
      </div>
    </noscript>
    
    <script type="module" src="/src/main.ts"></script>
    
    <!-- 隐藏加载动画的脚本 -->
    <script>
      // 页面加载完成后隐藏加载动画
      window.addEventListener('load', function() {
        const loading = document.getElementById('loading');
        if (loading) {
          loading.classList.add('fade-out');
          setTimeout(() => {
            loading.style.display = 'none';
          }, 500);
        }
      });
      
      // 如果页面加载时间过长，也要隐藏加载动画
      setTimeout(function() {
        const loading = document.getElementById('loading');
        if (loading && !loading.classList.contains('fade-out')) {
          loading.classList.add('fade-out');
          setTimeout(() => {
            loading.style.display = 'none';
          }, 500);
        }
      }, 10000); // 10秒后强制隐藏
    </script>
  </body>
</html>