index.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" Content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  6. <title>WebMC</title>
  7. <link id="favicon" rel="icon" href="#" type="image/x-icon" />
  8. <link rel="stylesheet" type="text/css" href="./mc.css" />
  9. <script src="./src/main.js" type="module"></script>
  10. <style id="mcpage-preload">
  11. mcpage-preload {
  12. position: absolute; top: 0;
  13. width: 100vw;
  14. text-align: center;
  15. height: 100vh;
  16. overflow: hidden;
  17. background: #1D1F21;
  18. transition: opacity 1s ease;
  19. z-index: 100000;
  20. }
  21. mcpage-preload p {
  22. padding-top: calc(40vh + 1em);
  23. margin-top: 0;
  24. animation: loading-blink 1.3s infinite ease-out;
  25. }
  26. @keyframes loading-blink {
  27. 50% { color: transparent; }
  28. }
  29. mcpage-preload img {
  30. position: fixed;
  31. bottom: 60%; left: 50%;
  32. transform: translateX(-50%);
  33. }
  34. mcpage-preload slot > ul, ::slotted(ul) {
  35. list-style: none;
  36. margin: 20px;
  37. padding: 0;
  38. white-space: nowrap;
  39. text-overflow: ellipsis;
  40. overflow: hidden;
  41. line-height: 1.2em;
  42. }
  43. mcpage-preload .left {
  44. text-align: start;
  45. direction: rtl;
  46. width: 50%;
  47. float: left;
  48. }
  49. mcpage-preload .right {
  50. text-align: start;
  51. width: 50%;
  52. float: right;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <mcpage-preload>
  58. <img src="./texture/jumpingBlock.gif" />
  59. <p>Loading...</p>
  60. <div><progress value="0" max="0"></progress>&emsp;<span class="loadingCount">0</span> / <span class="loadedCount">0</span></div>
  61. <div class="left"><slot name="loading"><ul></ul></slot></div>
  62. <div class="right"><slot name="loaded"><ul></ul></slot></div>
  63. <ul slot="loading"></ul>
  64. <ul slot="loaded"></ul>
  65. </mcpage-preload>
  66. </body>
  67. </html>