index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="An online avatar generator just for fun. Made with Vue3 and Vite."
    />
    <meta
      name="keywords"
      content="vector avatar,illustrations,avatar generator,avatar creator,fun avatar,随机头像,卡通头像在线免费生成工具,头像生成器"
    />
    <meta content="dark" name="color-scheme" />

    <meta property="og:title" content="Vue Color Avatar" />
    <meta
      property="og:description"
      content="A front-end only avatar generator"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://vue-color-avatar.vercel.app/" />
    <meta property="og:image" content="https://i.imgur.com/FIJEI9V.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="vue-color-avatar.vercel.app" />
    <meta
      property="twitter:url"
      content="https://vue-color-avatar.vercel.app/"
    />
    <meta name="twitter:title" content="Vue Color Avatar" />
    <meta
      name="twitter:description"
      content="A front-end only avatar generator"
    />
    <meta name="twitter:image" content="https://i.imgur.com/FIJEI9V.png" />

    <title>Vue Color Avatar</title>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-B4C9FN5DFR"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())

      gtag('config', 'G-B4C9FN5DFR')
    </script>

    <style>
      body {
        margin: 0;
      }

      [v-cloak] {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: hsl(216, 14%, 14%);
      }

      [v-cloak] .placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      @keyframes flip {
        0% {
          transform: rotateY(0);
        }

        25% {
          transform: rotateY(0.5turn);
        }

        50% {
          transform: rotateY(0.5turn) rotateX(0.5turn);
        }

        75% {
          transform: rotateY(1turn) rotateX(0.5turn);
        }

        100% {
          transform: rotateY(1turn) rotateX(1turn);
        }
      }

      [v-cloak] .logo {
        position: relative;
        width: 3rem;
        height: 3rem;
        overflow: hidden;
        background-color: hsl(241, 99%, 70%);
        border-radius: 50%;
        animation: 2s flip infinite;
      }

      [v-cloak] .logo::after {
        position: absolute;
        top: -40%;
        right: -40%;
        width: 100%;
        height: 100%;
        background-color: hsl(186, 84%, 74%);
        border-radius: 50%;
        content: '';
      }

      [v-cloak] .text {
        margin-top: 2rem;
        color: hsl(211, 19%, 70%);
        font-weight: bold;
        font-size: 1rem;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="placeholder">
        <div class="logo"></div>
        <div class="text">Coming soon...</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>