@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
179 lines (178 loc) • 5.21 kB
HTML
<html lang="en">
<head>
<base href="{{ basePath }}" />
{{ metadata|raw }}
<!-- Start Single Page Apps for GitHub Pages -->
<script>
// Single Page Apps for GitHub Pages
// https://github.com/rafrex/spa-github-pages
// Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
// ----------------------------------------------------------------------
// This script checks to see if a redirect is present in the query string
// and converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&').forEach(function (v) {
var a = v.split('=');
q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
});
if (q.p !== undefined) {
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + (q.p || '') +
(q.q ? ('?' + q.q) : '') +
l.hash
);
}
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
{{ serviceWorkerScript|raw }}
<style>
body {
margin: 0;
min-height: 98vh;
}
.use-modern-browser a {
font-size: 22px;
}
.use-modern-browser {
font-size: 22px;
text-align: center;
width: 100%;
}
</style>
<style id="loadingstyles">
haxcms-site-builder {
display: block;
}
body[no-js] haxcms-site-builder {
display: none ;
}
#loading {
background-color: white;
bottom: 0px;
left: 0px;
opacity: 1;
position: absolute;
right: 0px;
top: 0px;
transition: all linear 300ms;
-webkit-transition: all linear 300ms;
z-index: 99999999;
}
#loading.loaded {
animation: fade-out .7s ease-in-out;
animation-fill-mode: forwards;
}
#loading div.messaging {
color: rgba(255,255,255, 0.7);
font-family: Roboto;
left: 0px;
margin-top: -75px;
position: absolute;
right: 0px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#loading div.messaging h1 {
color: white;
font-family: 'Open Sans', 'arial', 'serif';
font-size: 40px;
background-color: orange;
transition: .4s ease-in-out all;
}
#loading img {
transition: .4s all ease-in-out;
width: 300px;
height: 300px;
margin-bottom: 50px;
border-radius: 50%;
border: 8px solid orange;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
}
.progress-line,
.progress-line:before {
height: 8px;
width: 100%;
margin: auto;
}
.progress-line {
background-color: rgba(0,0,0, 0.05);
display: -webkit-flex;
display: flex;
width: 300px;
}
.progress-line:before {
background-color: orange;
content: '';
animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes running-progress {
0% {
margin-left: 0px;
margin-right: 100%;
}
50% {
margin-left: 25%;
margin-right: 0%;
}
100% {
margin-left: 100%;
margin-right: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
<script id="loadingscript">
window.addEventListener('haxcms-ready', function(e) {
// give the web components a second to build
setTimeout(function() {
document.querySelector('#loading').classList.add('loaded');
setTimeout(function() {
document.querySelector('#loading').parentNode.removeChild(document.querySelector('#loading'));
document.querySelector('#loadingstyles').parentNode.removeChild(document.querySelector('#loadingstyles'));
document.querySelector('#loadingscript').parentNode.removeChild(document.querySelector('#loadingscript'));
}, 300);
}, 100)
});
</script>
</head>
<body {{ bodyAttrs|raw }}>
<div id="loading">
<div class="messaging">
<img src="{{ logo256x256 }}" alt="" loading="lazy" height="300px" width="300px" />
<div class="progress-line"></div>
<h1>Loading {{ title }}</h1>
</div>
</div>
<haxcms-site-builder id="site" file="site.json"></haxcms-site-builder>
<script>
window.HAXCMSContext="published";
window.__appCDN="https://{{ cdn }}/";
</script>
<script src="https://{{ cdn }}/build-haxcms.js"></script>
<script src="https://{{ cdn }}/build.js"></script>
</body>
</html>