master

分支 (3)

管理

管理

master

travis

dev

germinal
/
index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script>
        window.__envMode = "<%- __envMode %>";
		window.__APP_VERSION = "<%- version %>";
		window.__URL_API_VERSION = "/v1";
		window.__URL_BASE = "<%- urlBase %>";
		window.__URL_API_BASE = "<%- urlApiBase %>";
		window.__URL_WS_BASE = "<%- urlWsBase %>";
		window.__URL_STATIC_DIR = document.querySelector(`link[rel='icon']`).href.replace("favicon.ico", "");
  </script>
        <style>

@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('./assets/font/'); /* IE9 */
    src: url('./assets/font/?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./assets/font/webfont.woff2') format('woff2'),
    url('./assets/font/webfont.woff') format('woff'), /* chrome、firefox */
    url('./assets/font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('./assets/font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

*{
font-family:webfont;
}

  </style>
        <title>--</title>
    </head>

    <body>
        <div id="app"> </div>
        <div id="app-loading-wrapper">
            <style>
        #app-loading-wrapper {
            opacity: 1;
            transition: opacity 1.3s ease-out;
            z-index: 1;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        #app-loading-wrapper.hide {
            opacity: 0;
        }

        @font-face {
            font-family: "Plex Sans VF";
            src: url("https:/s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2") format("woff2-variations");
            font-weight: 100 700;
            font-stretch: 85% 100%;
            font-display: swap;
        }

        :root {
            font-family: "Plex Sans VF", Arial, sans-serif;
        }

        .t {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 100;
            text-transform: uppercase;

            --t: 2.5s;
            --r: 8.5rem;
        }

        .t i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) * -360deg));
        }

        .t b {
            display: block;
            animation: show var(--t) infinite forwards ease-in-out;
            animation-delay: calc((-1 * var(--t)) * (1 - var(--i)));
        }

        @keyframes show {
            0% {
                font-weight: 100;
                opacity: 0;
            }
            20% {
                font-weight: 900;
                opacity: 1;
            }
            90% {
                font-weight: 200;
                opacity: 1;
            }
            100% {
                font-weight: 100;
                opacity: 0;
                transform: translateY(500%) scale(.5);
            }
        }
    </style>
            <div class="t" data-circletext="gnidaol gnidaol gnidaol"></div>
            <script>
      (() => {
          const $el = document.querySelector("[data-circletext]");
          const text = $el.dataset.circletext;
          const chars = text.split("");
          const length = chars.length;
          const html = chars.map((char, i) => `<i style="--i: ${i / length}"><b>${char}</b></i>`).join("");
          $el.innerHTML = html;
      })();
    </script>
        </div>

        <script id="registrySW"></script>
        <script type="module" src="/src/main.js"></script>
    </body>

</html>