initial-load.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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. body {
  29. position: absolute;
  30. padding: 0;
  31. margin: 0;
  32. width: 100%;
  33. height: 100%;
  34. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  35. }
  36. .toast {
  37. position: absolute;
  38. top: 12px;
  39. right: 10px;
  40. left: 10px;
  41. margin: auto;
  42. max-width: 700px;
  43. border-radius: 3px;
  44. background: rgba(0,0,0,.9);
  45. -webkit-transform: translate3d(0px, -60px, 0px);
  46. transform: translate3d(0px, -60px, 0px);
  47. -webkit-transition: -webkit-transform 75ms ease-out;
  48. transition: transform 75ms ease-out;
  49. pointer-events: none;
  50. }
  51. .active {
  52. -webkit-transform: translate3d(0px, 0px, 0px);
  53. transform: translate3d(0px, 0px, 0px);
  54. }
  55. .content {
  56. display: flex;
  57. -webkit-align-items: center;
  58. -ms-flex-align: center;
  59. align-items: center;
  60. pointer-events: auto;
  61. }
  62. .message {
  63. -webkit-flex: 1;
  64. -ms-flex: 1;
  65. flex: 1;
  66. padding: 15px;
  67. font-size: 14px;
  68. color: #fff;
  69. }
  70. .spinner {
  71. position: relative;
  72. display: inline-block;
  73. width: 56px;
  74. height: 28px;
  75. }
  76. svg:not(:root) {
  77. overflow: hidden;
  78. }
  79. svg {
  80. position: absolute;
  81. top: 0;
  82. left: 0;
  83. width: 100%;
  84. height: 100%;
  85. -webkit-transform: translateZ(0);
  86. transform: translateZ(0);
  87. -webkit-animation: rotate 600ms linear infinite;
  88. animation: rotate 600ms linear infinite;
  89. }
  90. @-webkit-keyframes rotate {
  91. 0% {
  92. -webkit-transform: rotate(0deg);
  93. transform: rotate(0deg);
  94. }
  95. 100% {
  96. -webkit-transform: rotate(360deg);
  97. transform: rotate(360deg);
  98. }
  99. }
  100. @keyframes rotate {
  101. 0% {
  102. -webkit-transform: rotate(0deg);
  103. transform: rotate(0deg);
  104. }
  105. 100% {
  106. -webkit-transform: rotate(360deg);
  107. transform: rotate(360deg);
  108. }
  109. }
  110. svg circle {
  111. fill: transparent;
  112. stroke: white;
  113. stroke-width: 4px;
  114. stroke-dasharray: 128px;
  115. stroke-dashoffset: 82px;
  116. }
  117. .logs {
  118. position: absolute;
  119. top: 50px;
  120. right: 10px;
  121. left: 10px;
  122. margin: auto;
  123. max-width: 700px;
  124. padding: 32px;
  125. color: #5a5a5a;
  126. line-height: 1.5;
  127. }
  128. </style>
  129. </head>
  130. <body>
  131. <div class="toast">
  132. <div class="content">
  133. <div class="message">Initializing First Build...</div>
  134. <div class="spinner">
  135. <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>
  136. </div>
  137. </div>
  138. </div>
  139. <div class="logs">
  140. <pre id="log-output"></pre>
  141. </div>
  142. <script>
  143. setTimeout(function() {
  144. document.querySelector('.toast').classList.add('active');
  145. }, 100);
  146. var logOutput = document.getElementById('log-output');
  147. window.addEventListener('devserver:buildlog', function(ev) {
  148. var buildLog = ev.detail;
  149. if (buildLog && buildLog.messages) {
  150. logOutput.innerText = buildLog.messages.join('\n');
  151. }
  152. });
  153. </script>
  154. </body>
  155. </html>