@stencil/core
Version:
A Compiler for Web Components and Progressive Web Apps
168 lines (162 loc) • 5.86 kB
HTML
<html dir="ltr" lang="en">
<head data-tmpl="tmpl-initial-load">
<meta charset="utf-8">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistration().then(function(registration) {
if (registration) {
registration.unregister().then(function(hasUnregistered) {
if (hasUnregistered) {
console.log('unregistered service worker');
}
});
}
}).catch(function(err) {
console.error(err.message || err);
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<title>Initializing First Build...</title>
<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=">
<style>
* {
box-sizing: border-box;
}
html {
color-scheme: dark light;
}
body {
position: absolute;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.toast {
position: absolute;
top: 12px;
right: 10px;
left: 10px;
margin: auto;
max-width: 700px;
border-radius: 3px;
background: rgba(0, 0, 0, .9);
-webkit-transform: translate3d(0px, -60px, 0px);
transform: translate3d(0px, -60px, 0px);
-webkit-transition: -webkit-transform 75ms ease-out;
transition: transform 75ms ease-out;
pointer-events: none;
}
.active {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.content {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
pointer-events: auto;
}
.message {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px;
font-size: 14px;
color: #fff;
}
.spinner {
position: relative;
display: inline-block;
width: 56px;
height: 28px;
}
svg:not(:root) {
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: rotate 600ms linear infinite;
animation: rotate 600ms linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
svg circle {
fill: transparent;
stroke: white;
stroke-width: 4px;
stroke-dasharray: 128px;
stroke-dashoffset: 82px;
}
.logs {
position: absolute;
top: 50px;
right: 10px;
left: 10px;
margin: auto;
max-width: 700px;
padding: 32px;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
.toast {
background: rgb(49, 49, 49, .9);
}
}
</style>
</head>
<body>
<div class="toast">
<div class="content">
<div class="message">Initializing First Build...</div>
<div class="spinner">
<svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>
</div>
</div>
</div>
<div class="logs">
<pre id="log-output"></pre>
</div>
<script>
setTimeout(function() {
document.querySelector('.toast').classList.add('active');
}, 100);
var logOutput = document.getElementById('log-output');
window.addEventListener('devserver:buildlog', function(ev) {
var buildLog = ev.detail;
if (buildLog && buildLog.messages) {
logOutput.innerText = buildLog.messages.join('\n');
}
});
</script>
</body>
</html>