<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=yes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
    <link rel="icon" href="./logo.png" type="image/x-icon">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
    <% } %>
    <style>
    .mainload {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      width: 100px;
      height: 100px;
    }
    .mainload p {
      font-size: 16px;
      color: #666;
      margin-top: 10px;
    }
    .mainload .circular {
      height: 36px;
      width: 36px;
      animation: loading-rotate 2s linear infinite;
    }
    .mainload .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90,150;
      stroke-dashoffset: 0;
      stroke-width: 3;
      stroke: #ec3333;
      stroke-linecap: round;
    }
  @keyframes loading-rotate {
      to {
        transform: rotate(1turn)
      }
    }
    @keyframes loading-dash {
      0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
      }
      50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
      }
      to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
      }
    }
    @media screen and (min-width: 768px) {
      html {
        font-size: 37.5px !important;
        background-color: #EEF0F3;
        box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
      }
      body {
        max-width: 375px;
        left: 0;
        right: 0;
        margin: 0 auto !important;
      }
      .cr-nav-bar {
        max-width: 375px;
        left: 0;
        right: 0;
        margin: 0 auto !important;
        z-index: 999;
      }
    }
  </style>
  <script>
    window.onload = function() {
      // 阻止双击放大
      var lastTouchEnd = 0;
      document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.addEventListener('touchend', function(event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);

      // 阻止双指放大
      document.addEventListener('gesturestart', function(event) {
        event.preventDefault();
      });
    }
  </script>
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="mainload">
        <svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
        <p>加载中</p>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>
