<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      .browser-compatibility {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 40px;
        overflow-y: auto;
        background-color: #f8d7da;
        color: #721c24;
      }

      .browser-compatibility h2 {
        margin-top: 0;
        font-size: 24px;
        font-weight: bold;
      }

      .browser-compatibility p {
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 1.5;
      }

      .browser-compatibility ul {
        margin-bottom: 20px;
        padding-left: 20px;
      }

      .browser-compatibility li {
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.5;
      }

      .browser-compatibility a {
        color: #721c24;
        text-decoration: underline;
      }

      .browser-compatibility a:hover {
        text-decoration: none;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-DXBdGS0J.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DHzqm-pR.css">
  </head>
  <body>
    <div id="app"></div>
    <div id="browser-compatibility" class="browser-compatibility">
      <h2>WebVPN 浏览器兼容性提示</h2>
      <p>您当前使用的浏览器版本过旧,可能无法正常使用 WebVPN 系统的某些功能。</p>
      <p>为了获得最佳的 WebVPN 使用体验,我们建议您升级到以下浏览器的最新版本:</p>
      <ul>
        <li><a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a></li>
        <li><a href="https://www.mozilla.org/firefox/" target="_blank">Mozilla Firefox</a></li>
        <li><a href="https://www.apple.com/safari/" target="_blank">Apple Safari</a></li>
        <li><a href="https://www.microsoft.com/edge/" target="_blank">Microsoft Edge</a></li>
      </ul>
    </div>
    <script>
      function getBrowserInfo(userAgent) {
        var browserData = [
          { name: 'Chrome', regex: /Chrome\/(\d+)/ },
          { name: 'Firefox', regex: /Firefox\/(\d+)/ },
          { name: 'Safari', regex: /Version\/(\d+).*Safari/ },
          { name: 'Edge', regex: /Edg\/(\d+)/ }
        ]

        for (var i = 0; i < browserData.length; i++) {
          var match = userAgent.match(browserData[i].regex)
          if (match) {
            return { name: browserData[i].name, version: parseFloat(match[1]) }
          }
        }
        return { name: 'Unknown', version: 0 }
      }

      function checkBrowserCompatibility(userAgent) {
        if (userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('Trident/') !== -1) {
          return false
        }

        var browserVersions = {
          Chrome: 51,
          Firefox: 54,
          Safari: 10,
          Edge: 15
        }

        var browserInfo = getBrowserInfo(userAgent)
        if (browserVersions[browserInfo.name]) {
          return browserInfo.version >= browserVersions[browserInfo.name]
        }
        return true // Browser not recognized or not supported
      }

      // 在页面加载完成后执行兼容性检测
      window.onload = function () {
        var userAgent = navigator.userAgent
        var isCompatible = checkBrowserCompatibility(userAgent)
        if (!isCompatible) {
          document.getElementById('browser-compatibility').style.display = 'block'
          document.getElementById('app').style.display = 'none'
        }
      }
    </script>
  </body>
</html>
