1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!DOCTYPE html>
- <html lang="zh-cmn-Hans">
- <head>
- <meta charset="UTF-8">
- <link rel="icon" type="image/svg+xml" href="/favicon.svg">
- <meta content="yes" name="apple-mobile-web-app-capable"/>
- <link rel="apple-touch-icon" href="/favicon.svg">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
- <title>AI Assistant</title>
- </head>
- <body class="dark:bg-black">
- <div id="app">
- <style>
- .loading-wrap {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
- .balls {
- width: 4em;
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: space-between;
- }
- .balls div {
- width: 0.8em;
- height: 0.8em;
- border-radius: 50%;
- background-color: #4b9e5f;
- }
- .balls div:nth-of-type(1) {
- transform: translateX(-100%);
- animation: left-swing 0.5s ease-in alternate infinite;
- }
- .balls div:nth-of-type(3) {
- transform: translateX(-95%);
- animation: right-swing 0.5s ease-out alternate infinite;
- }
- @keyframes left-swing {
- 50%,
- 100% {
- transform: translateX(95%);
- }
- }
- @keyframes right-swing {
- 50% {
- transform: translateX(-95%);
- }
- 100% {
- transform: translateX(100%);
- }
- }
- @media (prefers-color-scheme: dark) {
- body {
- background: #121212;
- }
- }
- </style>
- <div class="loading-wrap">
- <div class="balls">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- </div>
- <script type="module" src="/src/main.ts"></script>
- </body>
- </html>
|