flutter_monisuo/web/index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Monisuo - Crypto Trading App">

  <!-- iOS meta tags & icons -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Monisuo">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>Monisuo</title>
  <link rel="manifest" href="manifest.json">

  <style>
    /* 启动页样式 */
    .splash-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      z-index: 9999;
    }

    .splash-logo {
      width: 120px;
      height: 120px;
      animation: pulse 2s ease-in-out infinite;
    }

    .splash-app-name {
      margin-top: 24px;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 28px;
      font-weight: 600;
      letter-spacing: 2px;
    }

    .splash-loading {
      margin-top: 32px;
      display: flex;
      gap: 6px;
    }

    .splash-loading-dot {
      width: 8px;
      height: 8px;
      background: #3498db;
      border-radius: 50%;
      animation: bounce 1.4s ease-in-out infinite;
    }

    .splash-loading-dot:nth-child(1) { animation-delay: 0s; }
    .splash-loading-dot:nth-child(2) { animation-delay: 0.2s; }
    .splash-loading-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
    }

    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
      40% { transform: scale(1); opacity: 1; }
    }

    /* 隐藏启动页 */
    .loading-hidden {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease-out;
    }
  </style>
</head>
<body>
  <!-- 启动页 -->
  <div id="loading" class="splash-container">
    <img src="icons/Icon-192.png" alt="Monisuo" class="splash-logo">
    <div class="splash-app-name">MONISUO</div>
    <div class="splash-loading">
      <div class="splash-loading-dot"></div>
      <div class="splash-loading-dot"></div>
      <div class="splash-loading-dot"></div>
    </div>
  </div>

  <noscript>
    <div style="text-align: center; padding: 50px; font-family: sans-serif;">
      <h1>JavaScript Required</h1>
      <p>Please enable JavaScript to run this application.</p>
    </div>
  </noscript>

  <!--
    You can customize the "flutter_bootstrap.js" script.
    This is useful to provide a custom configuration to the Flutter loader
    or to give the user feedback during the initialization process.

    For more details:
    * https://docs.flutter.dev/platform-integration/web/initialization
  -->
  <script src="flutter_bootstrap.js" async></script>

  <!-- 隐藏加载指示器 -->
  <script>
    // 防止重复隐藏
    var loadingHidden = false;

    function hideLoading() {
      if (loadingHidden) return;
      loadingHidden = true;

      var loading = document.getElementById('loading');
      if (loading) {
        loading.style.opacity = '0';
        loading.style.transition = 'opacity 0.3s ease-out';
        setTimeout(function() {
          if (loading && loading.parentNode) {
            loading.parentNode.removeChild(loading);
          }
        }, 300);
      }
    }

    // 方式1: Flutter 第一帧渲染完成（最可靠的方式）
    window.addEventListener('flutter-first-frame', hideLoading);

    // 方式2: 监听 Flutter 引擎初始化完成
    if (window._flutter) {
      window._flutter.loaderDidLoad = true;
    }

    // 方式3: 超时保护（10秒后强制隐藏）
    var timeoutId = setTimeout(hideLoading, 10000);

    // 方式4: 页面完全加载后检查（5秒后）
    window.addEventListener('load', function() {
      setTimeout(function() {
        // 检查 Flutter 应用是否已渲染
        var flutterView = document.querySelector('flutter-view') ||
                          document.querySelector('flt-glass-pane');
        if (flutterView) {
          hideLoading();
        } else {
          // 如果还没渲染，再等3秒
          setTimeout(hideLoading, 3000);
        }
      }, 5000);
    });

    // 方式5: 定期检查 Flutter 视图是否已存在
    var checkInterval = setInterval(function() {
      var flutterView = document.querySelector('flutter-view') ||
                        document.querySelector('flt-glass-pane');
      if (flutterView && flutterView.offsetWidth > 0) {
        clearInterval(checkInterval);
        clearTimeout(timeoutId);
        hideLoading();
      }
    }, 500);

    // 15秒后清除检查间隔
    setTimeout(function() {
      clearInterval(checkInterval);
    }, 15000);
  </script>

  <!-- vConsole 调试控制台 - 仅在开发环境启用 -->
  <script>
    // 检测是否为开发环境（localhost 或 127.0.0.1）
    var isDev = window.location.hostname === 'localhost' ||
                window.location.hostname === '127.0.0.1';

    if (isDev) {
      var script = document.createElement('script');
      script.src = 'vconsole.min.js';
      script.onload = function() {
        new VConsole();
      };
      document.body.appendChild(script);
    }
  </script>
</body>
</html>