<!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="A pure front-end avatar generator." /> <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(180deg); } 50% { transform: rotateY(180deg) rotateX(180deg); } 75% { transform: rotateY(360deg) rotateX(180deg); } 100% { transform: rotateY(360deg) rotateX(360deg); } } [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>