index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />
  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. html,
  14. body,
  15. #app {
  16. width: 100%;
  17. height: 100%;
  18. padding: 0;
  19. margin: 0;
  20. }
  21. .loading-box {
  22. display: flex;
  23. flex-direction: column;
  24. align-items: center;
  25. justify-content: center;
  26. width: 100%;
  27. height: 100%;
  28. }
  29. .loading-box .loading-wrap {
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. padding: 98px;
  34. }
  35. </style>
  36. <div class="loading-box">
  37. <div class="loading-wrap">
  38. <svg
  39. xmlns="http://www.w3.org/2000/svg"
  40. xmlns:xlink="http://www.w3.org/1999/xlink"
  41. style="margin: auto; display: block"
  42. width="80px"
  43. height="80px"
  44. viewBox="0 0 100 100"
  45. preserveAspectRatio="xMidYMid"
  46. >
  47. <g transform="translate(20 20)">
  48. <rect x="-15" y="-15" width="30" height="30" fill="rgba(189, 221, 255, 1)"></rect>
  49. </g>
  50. <g transform="translate(50 20)">
  51. <rect x="-15" y="-15" width="30" height="30" fill="rgba(98, 173, 255, 1)"></rect>
  52. </g>
  53. <g transform="translate(80 20)">
  54. <rect x="-15" y="-15" width="30" height="30" fill="rgba(35, 131, 235, 1)"></rect>
  55. </g>
  56. <g transform="translate(20 50)">
  57. <rect x="-15" y="-15" width="30" height="30" fill="rgba(98, 173, 255, 1)"></rect>
  58. </g>
  59. <g transform="translate(50 50)">
  60. <rect x="-15" y="-15" width="30" height="30" fill="rgba(35, 131, 235, 1)"></rect>
  61. </g>
  62. <g transform="translate(80 50)">
  63. <rect x="-15" y="-15" width="30" height="30" fill="rgba(5, 83, 167, 1)"></rect>
  64. </g>
  65. <g transform="translate(20 80)">
  66. <rect x="-15" y="-15" width="30" height="30" fill="rgba(35, 131, 235, 1)"></rect>
  67. </g>
  68. <g transform="translate(50 80)">
  69. <rect x="-15" y="-15" width="30" height="30" fill="rgba(5, 83, 167, 1)"></rect>
  70. </g>
  71. <g transform="translate(80 80)">
  72. <rect x="-15" y="-15" width="30" height="30" fill="rgba(0, 48, 99, 1)"></rect>
  73. </g>
  74. </svg>
  75. </div>
  76. </div>
  77. </div>
  78. <script>
  79. const globalState = JSON.parse(window.localStorage.getItem("longjoe-global"));
  80. if (globalState) {
  81. const html = document.querySelector("html");
  82. if (globalState.isDark) {
  83. html.style.background = "#141414";
  84. } else {
  85. html.style.background = "";
  86. }
  87. html.lang = globalState.language;
  88. }
  89. </script>
  90. <script type="module" src="/src/main.ts"></script>
  91. <script type="text/javascript" src="/ds.min.js"></script>
  92. </body>
  93. </html>