12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
- <title>ChatGPT Web</title>
- </head>
- <body>
- <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>
|