main

分支 (3)

标签 (4)

管理

管理

main

electron

master

0.4.9

0.4.7

0.4.6

0.4.5

PureChat
/
index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="keywords" content="ChatGPT, PureChat" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>%VITE_APP_NAME%</title>
    <!-- <script type="module" src="/loading.js"></script> -->
  </head>
  <style>
    #app {
      height: 100%;
    }
    html,
    body {
      height: 100%;
    }
    html {
      overflow: hidden;
    }
    body {
      margin: 0;
      text-rendering: optimizelegibility;
      font-family:
        "HarmonyOS Sans",
        "Segoe UI",
        "SF Pro Display",
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        "微软雅黑",
        "HarmonyOS Sans SC",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft Yahei UI",
        "Microsoft Yahei",
        "Source Han Sans CN",
        sans-serif,
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Apple Color Emoji",
        "Twemoji Mozilla",
        "Noto Color Emoji",
        "Android Emoji";
    }
  </style>
  <body>
    <div id="app">
      <style>
        .loading {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .container {
          --uib-size: 45px;
          --uib-color: #8385aa;
          --uib-speed: 1.3s;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          width: var(--uib-size);
          height: calc(var(--uib-size) * 0.6);
        }

        .cube {
          flex-shrink: 0;
          width: calc(var(--uib-size) * 0.2);
          height: calc(var(--uib-size) * 0.2);
          animation: jump var(--uib-speed) ease-in-out infinite;
        }

        .cube__inner {
          display: block;
          height: 100%;
          width: 100%;
          border-radius: 25%;
          background-color: var(--uib-color);
          transform-origin: center bottom;
          animation: morph var(--uib-speed) ease-in-out infinite;
          transition: background-color 0.3s ease;
        }

        .cube:nth-child(2) {
          animation-delay: calc(var(--uib-speed) * -0.36);

          .cube__inner {
            animation-delay: calc(var(--uib-speed) * -0.36);
          }
        }

        .cube:nth-child(3) {
          animation-delay: calc(var(--uib-speed) * -0.2);

          .cube__inner {
            animation-delay: calc(var(--uib-speed) * -0.2);
          }
        }

        @keyframes jump {
          0% {
            transform: translateY(0px);
          }

          30% {
            transform: translateY(0px);
            animation-timing-function: ease-out;
          }

          50% {
            transform: translateY(-200%);
            animation-timing-function: ease-in;
          }

          75% {
            transform: translateY(0px);
            animation-timing-function: ease-in;
          }
        }

        @keyframes morph {
          0% {
            transform: scaleY(1);
          }

          10% {
            transform: scaleY(1);
          }

          20%,
          25% {
            transform: scaleY(0.6) scaleX(1.3);
            animation-timing-function: ease-in-out;
          }

          30% {
            transform: scaleY(1.15) scaleX(0.9);
            animation-timing-function: ease-in-out;
          }

          40% {
            transform: scaleY(1);
          }

          70%,
          85%,
          100% {
            transform: scaleY(1);
          }

          75% {
            transform: scaleY(0.8) scaleX(1.2);
          }
        }
      </style>
      <div class="loading">
        <div class="container">
          <div class="cube"><div class="cube__inner"></div></div>
          <div class="cube"><div class="cube__inner"></div></div>
          <div class="cube"><div class="cube__inner"></div></div>
        </div>
      </div>
    </div>
    <script type="module" src="/log.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>