<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>slogo.png">
    <title>QuantDinger</title>
    <style>
      .first-loading-wrp {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: 420px;
        height: 100vh;
        background: #fff;
        position: relative;
        overflow: hidden;
      }
      
      .first-loading-wrp > h2 {
        font-size: 32px;
        margin-bottom: 40px;
        color: #333;
        font-weight: 600;
      }
      
      .first-loading-wrp .loading-wrp {
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        width: 100%;
        max-width: 600px;
      }
      
      /* 像素风格小猫奔跑动画容器 */
      .pixel-cat-container {
        position: relative;
        width: 100%;
        height: 120px;
        margin: 0 auto 30px;
        overflow: hidden;
      }
      
      /* 像素小猫主体 */
      .pixel-cat {
        position: absolute;
        left: 0;
        bottom: 24px;
        width: 32px;
        height: 32px;
        animation: catRun 0.4s steps(2) infinite, catMove 3.5s linear infinite;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
      }
      
      /* 所有像素元素都使用锐利边缘 */
      .pixel-cat * {
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
      }
      
      /* 猫头 - 像素方块组成 */
      .cat-head {
        position: absolute;
        left: 2px;
        top: 0;
        width: 16px;
        height: 14px;
        background: 
          /* 头部主体白色 */
          linear-gradient(#fff, #fff) 2px 4px / 12px 10px no-repeat,
          /* 左半脸黑色斑块 */
          linear-gradient(#000, #000) 2px 4px / 6px 10px no-repeat,
          /* 头顶 */
          linear-gradient(#fff, #fff) 4px 2px / 8px 2px no-repeat;
        animation: headBob 0.4s steps(2) infinite;
      }
      
      /* 左耳 - 黑色尖耳朵 */
      .cat-ear-left {
        position: absolute;
        left: 0px;
        top: -2px;
        width: 4px;
        height: 6px;
        background: 
          linear-gradient(#000, #000) 0px 4px / 4px 2px no-repeat,
          linear-gradient(#000, #000) 1px 2px / 2px 2px no-repeat,
          linear-gradient(#000, #000) 1px 0px / 2px 2px no-repeat;
      }
      
      /* 右耳 - 白色尖耳朵 */
      .cat-ear-right {
        position: absolute;
        right: 0px;
        top: -2px;
        width: 4px;
        height: 6px;
        background: 
          linear-gradient(#fff, #fff) 0px 4px / 4px 2px no-repeat,
          linear-gradient(#fff, #fff) 1px 2px / 2px 2px no-repeat,
          linear-gradient(#fff, #fff) 1px 0px / 2px 2px no-repeat;
        box-shadow: inset 0 0 0 1px #000;
      }
      
      .cat-ear-right::after {
        content: '';
        position: absolute;
        width: 4px;
        height: 6px;
        border: 1px solid #000;
        border-width: 0 1px 0 0;
        box-sizing: border-box;
      }
      
      /* 左眼 - 黑底白眼（在黑色区域） */
      .cat-eye-left {
        position: absolute;
        left: 4px;
        top: 6px;
        width: 4px;
        height: 4px;
        background: #fff;
      }
      
      .cat-eye-left::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 1px;
        width: 2px;
        height: 2px;
        background: #000;
      }
      
      /* 右眼 - 白底黑眼（在白色区域） */
      .cat-eye-right {
        position: absolute;
        right: 2px;
        top: 6px;
        width: 4px;
        height: 4px;
        background: #fff;
        border: 1px solid #000;
        box-sizing: border-box;
      }
      
      .cat-eye-right::after {
        content: '';
        position: absolute;
        left: 1px;
        top: 0px;
        width: 2px;
        height: 2px;
        background: #000;
      }
      
      /* 鼻子 - 小粉色方块 */
      .cat-nose {
        position: absolute;
        left: 7px;
        top: 10px;
        width: 2px;
        height: 2px;
        background: #000;
      }
      
      /* 胡须 - 像素线条 */
      .cat-whiskers {
        position: absolute;
        left: 0;
        top: 10px;
        width: 16px;
        height: 4px;
      }
      
      .cat-whiskers::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 0;
        width: 4px;
        height: 1px;
        background: #000;
        box-shadow: 0 2px 0 #000;
      }
      
      .cat-whiskers::after {
        content: '';
        position: absolute;
        right: -4px;
        top: 0;
        width: 4px;
        height: 1px;
        background: #000;
        box-shadow: 0 2px 0 #000;
      }
      
      /* 身体 - 黑白相间像素块 */
      .cat-body {
        position: absolute;
        left: 4px;
        top: 14px;
        width: 14px;
        height: 10px;
        background: 
          /* 白色部分 */
          linear-gradient(#fff, #fff) 6px 0 / 8px 10px no-repeat,
          /* 黑色部分 */
          linear-gradient(#000, #000) 0 0 / 8px 10px no-repeat;
        border: 1px solid #000;
        box-sizing: border-box;
      }
      
      /* 前腿 - 左 (黑色) */
      .cat-leg-front-left {
        position: absolute;
        left: 6px;
        top: 22px;
        width: 3px;
        height: 8px;
        background: #000;
        animation: legFront 0.2s steps(2) infinite;
      }
      
      /* 前腿 - 右 (白色带边框) */
      .cat-leg-front-right {
        position: absolute;
        left: 12px;
        top: 22px;
        width: 3px;
        height: 8px;
        background: #fff;
        border: 1px solid #000;
        box-sizing: border-box;
        animation: legFront 0.2s steps(2) infinite 0.1s;
      }
      
      /* 后腿 - 左 (白色带边框) */
      .cat-leg-back-left {
        position: absolute;
        left: 3px;
        top: 22px;
        width: 3px;
        height: 8px;
        background: #fff;
        border: 1px solid #000;
        box-sizing: border-box;
        animation: legBack 0.2s steps(2) infinite 0.1s;
      }
      
      /* 后腿 - 右 (黑色) */
      .cat-leg-back-right {
        position: absolute;
        left: 15px;
        top: 22px;
        width: 3px;
        height: 8px;
        background: #000;
        animation: legBack 0.2s steps(2) infinite;
      }
      
      /* 尾巴 - 长且弯曲的像素尾巴 */
      .cat-tail {
        position: absolute;
        right: -10px;
        top: 10px;
        width: 12px;
        height: 10px;
        background: 
          /* 尾巴根部 */
          linear-gradient(#000, #000) 0 6px / 3px 3px no-repeat,
          /* 尾巴中部 */
          linear-gradient(#000, #000) 3px 4px / 3px 3px no-repeat,
          /* 尾巴弯曲 */
          linear-gradient(#000, #000) 6px 2px / 3px 3px no-repeat,
          /* 尾巴尖端 */
          linear-gradient(#000, #000) 9px 0 / 3px 3px no-repeat;
        animation: tailWag 0.3s steps(2) infinite alternate;
        transform-origin: left bottom;
      }
      
      /* 奔跑动画 - 轻微上下跳动 */
      @keyframes catRun {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
      }
      
      /* 移动动画 - 左右移动 */
      @keyframes catMove {
        0% { left: -40px; }
        100% { left: calc(100% + 40px); }
      }
      
      /* 前腿动画 */
      @keyframes legFront {
        0%, 100% { transform: rotate(-15deg); }
        50% { transform: rotate(15deg); }
      }
      
      /* 后腿动画 */
      @keyframes legBack {
        0%, 100% { transform: rotate(15deg); }
        50% { transform: rotate(-15deg); }
      }
      
      /* 尾巴摆动 */
      @keyframes tailWag {
        0% { transform: rotate(-10deg); }
        100% { transform: rotate(10deg); }
      }
      
      /* 头部轻微摆动 */
      @keyframes headBob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-1px); }
      }
      
      /* 地面效果 - 像素风格 */
      .ground {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 12px;
        background: repeating-linear-gradient(
          90deg,
          #222 0px,
          #222 6px,
          #555 6px,
          #555 12px
        );
        animation: groundMove 0.3s linear infinite;
        image-rendering: pixelated;
      }
      
      @keyframes groundMove {
        0% { background-position: 0 0; }
        100% { background-position: 12px 0; }
      }
      
      /* 品牌文字 */
      .brand-text {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-top: 20px;
        letter-spacing: 2px;
      }
      
      /* 暗色主题适配 */
      @media (prefers-color-scheme: dark) {
        .first-loading-wrp {
          background: #141414;
        }
        
        .first-loading-wrp > h2 {
          color: #fff;
        }
        
        .brand-text {
          color: #fff;
        }
        
        .ground {
          background: repeating-linear-gradient(
            90deg,
            #555 0px,
            #555 6px,
            #333 6px,
            #333 12px
          );
        }
        
        /* 暗色模式下白色部分改成浅灰 */
        .cat-head {
          background: 
            linear-gradient(#ddd, #ddd) 2px 4px / 12px 10px no-repeat,
            linear-gradient(#000, #000) 2px 4px / 6px 10px no-repeat,
            linear-gradient(#ddd, #ddd) 4px 2px / 8px 2px no-repeat;
        }
        
        .cat-body {
          background: 
            linear-gradient(#ddd, #ddd) 6px 0 / 8px 10px no-repeat,
            linear-gradient(#000, #000) 0 0 / 8px 10px no-repeat;
        }
        
        .cat-leg-front-right,
        .cat-leg-back-left {
          background: #ddd;
        }
        
        .cat-eye-left,
        .cat-eye-right {
          background: #ddd;
        }
      }
      
      /* 确保像素风格在所有浏览器中正确显示 */
      .pixel-cat,
      .pixel-cat * {
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
      }
      
      /* 手机端适配 */
      @media (max-width: 768px) {
        .pixel-cat-container {
          transform: scale(1.5);
        }
        
        .first-loading-wrp > h2 {
          font-size: 24px;
          margin-bottom: 30px;
        }
        
        .brand-text {
          font-size: 20px;
        }
      }
    </style>
    <!-- require cdn assets css -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="first-loading-wrp">
        <h2>Landing</h2>
        <div class="loading-wrp">
          <div class="pixel-cat-container">
            <div class="ground"></div>
            <div class="pixel-cat">
              <div class="cat-head">
                <div class="cat-ear-left"></div>
                <div class="cat-ear-right"></div>
                <div class="cat-eye-left"></div>
                <div class="cat-eye-right"></div>
                <div class="cat-nose"></div>
                <div class="cat-whiskers"></div>
              </div>
              <div class="cat-body"></div>
              <div class="cat-leg-front-left"></div>
              <div class="cat-leg-front-right"></div>
              <div class="cat-leg-back-left"></div>
              <div class="cat-leg-back-right"></div>
              <div class="cat-tail"></div>
            </div>
          </div>
        </div>
        <div class="brand-text">QuantDinger</div>
      </div>
    </div>
    <!-- require cdn assets js -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>
