feat: 初始化项目

index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
+    <title>%VITE_APP_NAME%</title>
+    <style>
+      .xtbg-spin-box {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .xtbg-spin {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        color: #161a23;
+        font-size: 14px;
+        font-variant: tabular-nums;
+        line-height: 1.5;
+        list-style: none;
+        font-feature-settings: "tnum";
+        position: absolute;
+        display: none;
+        color: #0060f0;
+        text-align: center;
+        vertical-align: middle;
+        opacity: 0;
+        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      }
+      .xtbg-spin-spinning {
+        position: static;
+        display: inline-block;
+        opacity: 1;
+      }
+      .xtbg-spin-dot-spin {
+        transform: rotate(45deg);
+        -webkit-animation: gmdRotate 1.2s infinite linear;
+        animation: gmdRotate 1.2s infinite linear;
+      }
+      .xtbg-spin-dot {
+        position: relative;
+        display: inline-block;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+      .xtbg-spin-dot-item {
+        position: absolute;
+        display: block;
+        width: 9px;
+        height: 9px;
+        background-color: #0060f0;
+        border-radius: 100%;
+        transform: scale(0.75);
+        transform-origin: 50% 50%;
+        opacity: 0.3;
+        -webkit-animation: gmdSpinMove 1s infinite linear alternate;
+        animation: gmdSpinMove 1s infinite linear alternate;
+      }
+      .xtbg-spin-dot-item:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+      .xtbg-spin-dot-item:nth-child(2) {
+        top: 0;
+        right: 0;
+        animation-delay: 0.4s;
+      }
+      .xtbg-spin-dot-item:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        animation-delay: 0.8s;
+      }
+      .xtbg-spin-dot-item:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        animation-delay: 1.2s;
+      }
+      @-webkit-keyframes gmdSpinMove {
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes gmdSpinMove {
+        to {
+          opacity: 1;
+        }
+      }
+      @-webkit-keyframes gmdRotate {
+        to {
+          transform: rotate(405deg);
+        }
+      }
+      @keyframes gmdRotate {
+        to {
+          transform: rotate(405deg);
+        }
+      }
+    </style>
+    %NODE_PRINT_LOG%
+  </head>
+  <body>
+    <div id="app">
+      <div class="xtbg-spin-box">
+        <div class="xtbg-spin xtbg-spin-spinning">
+          <span class="xtbg-spin-dot xtbg-spin-dot-spin">
+            <i class="xtbg-spin-dot-item"></i>
+            <i class="xtbg-spin-dot-item"></i>
+            <i class="xtbg-spin-dot-item"></i>
+            <i class="xtbg-spin-dot-item"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>