index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <<<<<<< HEAD
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link rel="icon" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  9. <meta name="description" content="Vite Starter Template By Kirk Lin" />
  10. <script type="module" crossorigin src="/assets/index-mMdhNzKT.js"></script>
  11. =======
  12. <!doctype html>
  13. <html lang="en">
  14. <head>
  15. <meta charset="UTF-8" />
  16. <link rel="icon" />
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  18. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  19. <meta name="description" content="Vite Starter Template By Kirk Lin" />
  20. <script type="module" crossorigin src="/assets/index-AtzxvIcf.js"></script>
  21. >>>>>>> edca0c1ac972bccd1dc10d35a40521ab9e132a15
  22. <link rel="stylesheet" crossorigin href="/assets/index-C_jJuFWg.css">
  23. <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  24. <body>
  25. <div id="app">
  26. <style>
  27. .app-loading {
  28. display: flex;
  29. width: 100%;
  30. height: 100%;
  31. justify-content: center;
  32. align-items: center;
  33. flex-direction: column;
  34. background-color: #f4f7f9;
  35. }
  36. .app-loading .app-loading-wrap {
  37. position: absolute;
  38. top: 50%;
  39. left: 50%;
  40. display: flex;
  41. transform: translate3d(-50%, -50%, 0);
  42. justify-content: center;
  43. align-items: center;
  44. flex-direction: column;
  45. }
  46. .loader {
  47. width: 48px;
  48. height: 48px;
  49. margin: auto;
  50. position: relative;
  51. }
  52. .loader:before {
  53. content: "";
  54. width: 48px;
  55. height: 5px;
  56. background: #f0808050;
  57. position: absolute;
  58. top: 60px;
  59. left: 0;
  60. border-radius: 50%;
  61. animation: shadow324 0.5s linear infinite;
  62. }
  63. .loader:after {
  64. content: "";
  65. width: 100%;
  66. height: 100%;
  67. background: #f08080;
  68. position: absolute;
  69. top: 0;
  70. left: 0;
  71. border-radius: 4px;
  72. animation: jump7456 0.5s linear infinite;
  73. }
  74. @keyframes jump7456 {
  75. 15% {
  76. border-bottom-right-radius: 3px;
  77. }
  78. 25% {
  79. transform: translateY(9px) rotate(22.5deg);
  80. }
  81. 50% {
  82. transform: translateY(18px) scale(1, 0.9) rotate(45deg);
  83. border-bottom-right-radius: 40px;
  84. }
  85. 75% {
  86. transform: translateY(9px) rotate(67.5deg);
  87. }
  88. 100% {
  89. transform: translateY(0) rotate(90deg);
  90. }
  91. }
  92. @keyframes shadow324 {
  93. 0%,
  94. 100% {
  95. transform: scale(1, 1);
  96. }
  97. 50% {
  98. transform: scale(1.2, 1);
  99. }
  100. }
  101. </style>
  102. <div class="app-loading">
  103. <div class="app-loading-wrap">
  104. <div class="loader"></div>
  105. </div>
  106. </div>
  107. </div>
  108. </body>
  109. </html>