index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  6. <link rel="icon" type="image/png" href="/icon.png" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title><%- title %></title>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <style>
  13. #loader-wrapper {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. width: 100%;
  18. height: 100%;
  19. z-index: 1000;
  20. }
  21. #loader {
  22. display: block;
  23. position: relative;
  24. left: 50%;
  25. top: 50%;
  26. width: 150px;
  27. height: 150px;
  28. margin: -75px 0 0 -75px;
  29. border-radius: 50%;
  30. border: 3px solid transparent;
  31. border-top-color: #3498db;
  32. -webkit-animation: spin 2s linear infinite;
  33. /* Chrome, Opera 15+, Safari 5+ */
  34. animation: spin 2s linear infinite;
  35. /* Chrome, Firefox 16+, IE 10+, Opera */
  36. z-index: 1001;
  37. }
  38. #loader-logo {
  39. display: block;
  40. position: absolute;
  41. left: 48%;
  42. top: 46%;
  43. background: url(../images/user-bg-2.jpg) no-repeat center center;
  44. z-index: 1001;
  45. }
  46. #loader:before {
  47. content: "";
  48. position: absolute;
  49. top: 5px;
  50. left: 5px;
  51. right: 5px;
  52. bottom: 5px;
  53. border-radius: 50%;
  54. border: 3px solid transparent;
  55. border-top-color: #e74c3c;
  56. -webkit-animation: spin 3s linear infinite;
  57. /* Chrome, Opera 15+, Safari 5+ */
  58. animation: spin 3s linear infinite;
  59. /* Chrome, Firefox 16+, IE 10+, Opera */
  60. }
  61. #loader:after {
  62. content: "";
  63. position: absolute;
  64. top: 15px;
  65. left: 15px;
  66. right: 15px;
  67. bottom: 15px;
  68. border-radius: 50%;
  69. border: 3px solid transparent;
  70. border-top-color: #f9c922;
  71. -webkit-animation: spin 1.5s linear infinite;
  72. /* Chrome, Opera 15+, Safari 5+ */
  73. animation: spin 1.5s linear infinite;
  74. /* Chrome, Firefox 16+, IE 10+, Opera */
  75. }
  76. @-webkit-keyframes spin {
  77. 0% {
  78. -webkit-transform: rotate(0deg);
  79. /* Chrome, Opera 15+, Safari 3.1+ */
  80. -ms-transform: rotate(0deg);
  81. /* IE 9 */
  82. transform: rotate(0deg);
  83. /* Firefox 16+, IE 10+, Opera */
  84. }
  85. 100% {
  86. -webkit-transform: rotate(360deg);
  87. /* Chrome, Opera 15+, Safari 3.1+ */
  88. -ms-transform: rotate(360deg);
  89. /* IE 9 */
  90. transform: rotate(360deg);
  91. /* Firefox 16+, IE 10+, Opera */
  92. }
  93. }
  94. @keyframes spin {
  95. 0% {
  96. -webkit-transform: rotate(0deg);
  97. /* Chrome, Opera 15+, Safari 3.1+ */
  98. -ms-transform: rotate(0deg);
  99. /* IE 9 */
  100. transform: rotate(0deg);
  101. /* Firefox 16+, IE 10+, Opera */
  102. }
  103. 100% {
  104. -webkit-transform: rotate(360deg);
  105. /* Chrome, Opera 15+, Safari 3.1+ */
  106. -ms-transform: rotate(360deg);
  107. /* IE 9 */
  108. transform: rotate(360deg);
  109. /* Firefox 16+, IE 10+, Opera */
  110. }
  111. }
  112. #loader-wrapper .loader-section {
  113. position: fixed;
  114. top: 0;
  115. width: 51%;
  116. height: 100%;
  117. background: #222222;
  118. z-index: 1000;
  119. -webkit-transform: translateX(0);
  120. /* Chrome, Opera 15+, Safari 3.1+ */
  121. -ms-transform: translateX(0);
  122. /* IE 9 */
  123. transform: translateX(0);
  124. /* Firefox 16+, IE 10+, Opera */
  125. }
  126. #loader-wrapper .loader-section.section-left {
  127. left: 0;
  128. }
  129. #loader-wrapper .loader-section.section-right {
  130. right: 0;
  131. }
  132. /* Loaded */
  133. .loaded #loader-wrapper .loader-section.section-left {
  134. -webkit-transform: translateX(-100%);
  135. /* Chrome, Opera 15+, Safari 3.1+ */
  136. -ms-transform: translateX(-100%);
  137. /* IE 9 */
  138. transform: translateX(-100%);
  139. /* Firefox 16+, IE 10+, Opera */
  140. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  141. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  142. }
  143. .loaded #loader-wrapper .loader-section.section-right {
  144. -webkit-transform: translateX(100%);
  145. /* Chrome, Opera 15+, Safari 3.1+ */
  146. -ms-transform: translateX(100%);
  147. /* IE 9 */
  148. transform: translateX(100%);
  149. /* Firefox 16+, IE 10+, Opera */
  150. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  151. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  152. }
  153. .loaded #loader {
  154. opacity: 0;
  155. -webkit-transition: all 0.3s ease-out;
  156. transition: all 0.3s ease-out;
  157. }
  158. .loaded #loader-wrapper {
  159. visibility: hidden;
  160. -webkit-transform: translateY(-100%);
  161. /* Chrome, Opera 15+, Safari 3.1+ */
  162. -ms-transform: translateY(-100%);
  163. /* IE 9 */
  164. transform: translateY(-100%);
  165. /* Firefox 16+, IE 10+, Opera */
  166. -webkit-transition: all 0.3s 1s ease-out;
  167. transition: all 0.3s 1s ease-out;
  168. }
  169. </style>
  170. <div id="loader-wrapper">
  171. <div id="loader"></div>
  172. <div class="loader-section section-left"></div>
  173. <div class="loader-section section-right"></div>
  174. </div>
  175. </div>
  176. <script type="module" src="/src/main.ts"></script>
  177. </body>
  178. </html>