initial-load.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <!doctype html>
  2. <html dir="ltr" lang="en">
  3. <head data-tmpl="tmpl-initial-load">
  4. <meta charset="utf-8">
  5. <script>
  6. if ('serviceWorker' in navigator) {
  7. navigator.serviceWorker.getRegistration().then(function(registration) {
  8. if (registration) {
  9. registration.unregister().then(function(hasUnregistered) {
  10. if (hasUnregistered) {
  11. console.log('unregistered service worker');
  12. }
  13. });
  14. }
  15. }).catch(function(err) {
  16. console.error(err.message || err);
  17. });
  18. }
  19. </script>
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  21. <meta http-equiv="x-ua-compatible" content="IE=Edge">
  22. <title>Initializing First Build...</title>
  23. <link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAjVBMVEUAAAD8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjLn7xn3AAAALnRSTlMAsFBgAaDxfPpAdTMcD/fs47kDBhVXJQpvLNbInIiBRvSqIb+TZ2OOONxdzUxpgKSpAAAAA69JREFUeNrt3FtvskAQxvERFQXFioqnCkqth572+3+8947dN00TliF5ZpP53ZOAveg/OzCklFJKKaWUUkoppQTZm77cCGFo+jIhhG/TlwchJAvTk/GIAA6x6Um+JoDti+nJ644A5h+mJ8eMALKj6cnHnAB2r80NLJ4jf3Vz+cuWANZ5cwPTM/l7by6PZwQwGptGQf4q++dLCOHdNIbkb2IvjwjAvYEf8pe6j4/wYxopr/9SQih4BXa3l5eEcJ7a++c9/gkSQE8bcCWvXwcrAjjYADrxHv8KCbi3JasgD5fm8i9IAG1swMXzDv0X2wDaEED21dzA5UDeVoPm8uUbAayvvAI42YA7EIDzA5pv8lc6/UoAoxMv4CZuvyKUpnHn9VNBAG6B7XkBtCeEO6/AbvbyihAiXsB92svfCcA9wap4j19DAmgWs37AZCrnBKvu8vgX9AmWE3BZh/6L7QkWJIA2RxtwHQpml9sAQp9gXWbkbxz4CdYDfIK1qk1j3IV9fPgJFlNECJXhYfSfsBHkhBCKwEd452nYI7wncwQJP8GKTU+uO0I4D/uSkVJKqXAkA5nK9icoIi3nrU9QRHrZtj5BESmetT5BEantPCh7NTJFrUdgMg1bj8BkSv1HYJ8RmjMQKf1HYDdC+/R/IyQFzbD4AxH+CIyPPxCJoEdQ/IFIMgXNEPkDkd8jMLQs5wRcTXA1J+By/BGO+0ovYwQGU3kPRLJfIzCkCSfgpgmhpc5AxD/gIkLb8wKO0DTgoNyaGQQecNfQAy7TgGtHA04DLtyA24UecHngAVdrwIkJuAitU8DJ1Dbghkam9gEnU+uAWxiRjhsdoXagI1TPgKNyIBO+ZpRSSrW3HfblTAA9/juPDwTAfiMK9VG3PY/hwX7Ubc9j+AoCWNWGp+NSH4HflE2IgXUEGPI3TTfmN4ndv2kSsRUJvpUn4W1FShbYb5rc84ySAtzKs3W3IgW4lWfO24q0zsFbebIjaysSjbtt5RHzUf0DHHCrAW8gVYEDzl0LGYW4lefB24uYQgOOfwN7dMANeW/k3DkBJ2CrUNE54GRsFYIHnPNR+iPEgHPWKo5DDDhnrWKeBRhwzlrFeNtlq5CgtYqzAAPODaBzgAH331rFAAOOqsDXKjL3IqboN7ILJ4BCDDh3r3SIAfd0AijEgHP3So/8wQNuvjRBbxVij5A6Bpy8EZJnwIkbIfkFnLwRkm/ASRshXbwDTtYICRRwt7BHqEoppZRSSimllFLqD/8AOXJZHefotiIAAAAASUVORK5CYII=">
  24. <style>
  25. * {
  26. box-sizing: border-box;
  27. }
  28. html {
  29. color-scheme: dark light;
  30. }
  31. body {
  32. position: absolute;
  33. padding: 0;
  34. margin: 0;
  35. width: 100%;
  36. height: 100%;
  37. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  38. }
  39. .toast {
  40. position: absolute;
  41. top: 12px;
  42. right: 10px;
  43. left: 10px;
  44. margin: auto;
  45. max-width: 700px;
  46. border-radius: 3px;
  47. background: rgba(0, 0, 0, .9);
  48. -webkit-transform: translate3d(0px, -60px, 0px);
  49. transform: translate3d(0px, -60px, 0px);
  50. -webkit-transition: -webkit-transform 75ms ease-out;
  51. transition: transform 75ms ease-out;
  52. pointer-events: none;
  53. }
  54. .active {
  55. -webkit-transform: translate3d(0px, 0px, 0px);
  56. transform: translate3d(0px, 0px, 0px);
  57. }
  58. .content {
  59. display: flex;
  60. -webkit-align-items: center;
  61. -ms-flex-align: center;
  62. align-items: center;
  63. pointer-events: auto;
  64. }
  65. .message {
  66. -webkit-flex: 1;
  67. -ms-flex: 1;
  68. flex: 1;
  69. padding: 15px;
  70. font-size: 14px;
  71. color: #fff;
  72. }
  73. .spinner {
  74. position: relative;
  75. display: inline-block;
  76. width: 56px;
  77. height: 28px;
  78. }
  79. svg:not(:root) {
  80. overflow: hidden;
  81. }
  82. svg {
  83. position: absolute;
  84. top: 0;
  85. left: 0;
  86. width: 100%;
  87. height: 100%;
  88. -webkit-transform: translateZ(0);
  89. transform: translateZ(0);
  90. -webkit-animation: rotate 600ms linear infinite;
  91. animation: rotate 600ms linear infinite;
  92. }
  93. @-webkit-keyframes rotate {
  94. 0% {
  95. -webkit-transform: rotate(0deg);
  96. transform: rotate(0deg);
  97. }
  98. 100% {
  99. -webkit-transform: rotate(360deg);
  100. transform: rotate(360deg);
  101. }
  102. }
  103. @keyframes rotate {
  104. 0% {
  105. -webkit-transform: rotate(0deg);
  106. transform: rotate(0deg);
  107. }
  108. 100% {
  109. -webkit-transform: rotate(360deg);
  110. transform: rotate(360deg);
  111. }
  112. }
  113. svg circle {
  114. fill: transparent;
  115. stroke: white;
  116. stroke-width: 4px;
  117. stroke-dasharray: 128px;
  118. stroke-dashoffset: 82px;
  119. }
  120. .logs {
  121. position: absolute;
  122. top: 50px;
  123. right: 10px;
  124. left: 10px;
  125. margin: auto;
  126. max-width: 700px;
  127. padding: 32px;
  128. line-height: 1.5;
  129. }
  130. @media (prefers-color-scheme: dark) {
  131. .toast {
  132. background: rgb(49, 49, 49, .9);
  133. }
  134. }
  135. </style>
  136. </head>
  137. <body>
  138. <div class="toast">
  139. <div class="content">
  140. <div class="message">Initializing First Build...</div>
  141. <div class="spinner">
  142. <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="logs">
  147. <pre id="log-output"></pre>
  148. </div>
  149. <script>
  150. setTimeout(function() {
  151. document.querySelector('.toast').classList.add('active');
  152. }, 100);
  153. var logOutput = document.getElementById('log-output');
  154. window.addEventListener('devserver:buildlog', function(ev) {
  155. var buildLog = ev.detail;
  156. if (buildLog && buildLog.messages) {
  157. logOutput.innerText = buildLog.messages.join('\n');
  158. }
  159. });
  160. </script>
  161. </body>
  162. </html>