mirror of https://github.com/lissy93/dashy
293 lines
9.2 KiB
HTML
293 lines
9.2 KiB
HTML
<!doctype html>
|
|
<!-- Dashy: Licensed under MIT, (C) 2024 Alicia Sykes <https://aliciasykes.com> -->
|
|
<!-- This is the default page, displayed while the app is still building -->
|
|
<html lang="en">
|
|
<head>
|
|
<title>Dashy</title>
|
|
<meta name="description" content="Welcome to Dashy">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Dashy Title Wavey Text -->
|
|
<svg viewbox="0 0 100 20">
|
|
<defs>
|
|
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="5%" stop-color="#00CCB4" />
|
|
<stop offset="95%" stop-color="#1186cf" />
|
|
</linearGradient>
|
|
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
|
|
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z"
|
|
mask="url(#mask)" fill="url(#gradient)">
|
|
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" from="0,0" to="40,0"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
</pattern>
|
|
</defs>
|
|
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.8">Dashy</text>
|
|
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.5">Dashy</text>
|
|
</svg>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-outer" id="bar-outer">
|
|
<div class="progress-inner" id="bar"></div>
|
|
</div>
|
|
|
|
<!-- Status label, with animated dots -->
|
|
<div>
|
|
<h2 id="status-text">Initializing</h2>
|
|
<span id="dots" class="dots-cont">
|
|
<span class="dot dot-1"></span>
|
|
<span class="dot dot-2"></span>
|
|
<span class="dot dot-3"></span>
|
|
<span class="dot dot-4"></span>
|
|
</span>
|
|
</div>
|
|
|
|
<p class="time-note" id="note">This may take a minute or two</p>
|
|
|
|
<div class="why-am-i-seeing-this">
|
|
<h3>Why are you seeing this screen?</h3>
|
|
<p>
|
|
The app's built files aren't yet present in the /dist directory,
|
|
so this page is displayed while we compile the source.
|
|
</p>
|
|
</div>
|
|
|
|
<style lang="css">
|
|
/* Page Layout Styles */
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #0d1220;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
svg {
|
|
font-family: 'Fredoka One', 'Cabin Condensed', 'Courier New', Courier, monospace;
|
|
font-weight: bold;
|
|
max-width: 80%;
|
|
height: auto;
|
|
}
|
|
|
|
h2 {
|
|
color: #fff;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
display: inline;
|
|
}
|
|
|
|
/* Animated Dots */
|
|
.dots-cont {
|
|
display: inline;
|
|
}
|
|
|
|
.dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #fff;
|
|
display: inline-block;
|
|
border-radius: 35%;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin: 0px 2.5px;
|
|
position: relative;
|
|
animation: jump 1s infinite;
|
|
}
|
|
.dots-cont .dot-1 { -webkit-animation-delay: 100ms; animation-delay: 100ms; }
|
|
.dots-cont .dot-2 { -webkit-animation-delay: 200ms; animation-delay: 200ms; }
|
|
.dots-cont .dot-3 { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
|
|
.dots-cont .dot-4 { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
|
|
|
|
@keyframes jump {
|
|
0% { bottom: 0px; }
|
|
20% { bottom: 5px; }
|
|
40% { bottom: 0px; }
|
|
}
|
|
|
|
/* Little note */
|
|
p.time-note, p.time-note a {
|
|
font-size: 1rem;
|
|
color: #808080a6;
|
|
font-family: Tahoma, 'Trebuchet MS', sans-serif;
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress-outer {
|
|
position: relative;
|
|
margin: 1rem;
|
|
height: 0.5rem;
|
|
width: 20rem;
|
|
border: 1px solid #fff;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.progress-outer .progress-inner {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
width: 0px;
|
|
height: 0.5rem;
|
|
border-radius: 15px;
|
|
}
|
|
#bar.stage-0 { animation: progress-0 8s infinite linear; }
|
|
#bar.stage-1 { animation: progress-1 8s infinite linear; }
|
|
#bar.stage-2 { animation: progress-2 8s infinite linear; }
|
|
#bar.stage-3 { animation: progress-3 8s infinite linear; }
|
|
#bar.stage-4 { animation: progress-4 8s infinite linear; }
|
|
#bar.stage-5 { animation: progress-5 8s infinite linear; }
|
|
#bar.stage-6 { animation: progress-6 8s infinite linear; }
|
|
#bar.stage-7 { animation: progress-7 8s infinite linear; }
|
|
#bar.stage-8 { animation: progress-8 8s infinite linear; }
|
|
|
|
@keyframes progress {
|
|
0% { width: 0%; }
|
|
25% { width: 50%; }
|
|
50% { width: 75%; }
|
|
75% { width: 85%; }
|
|
100% { width: 100%; }
|
|
}
|
|
@keyframes progress-0 {
|
|
0% { width: 0%; }
|
|
50% { width: 20%; }
|
|
100% { width: 30%; }
|
|
}
|
|
@keyframes progress-1 {
|
|
0% { width: 30%; }
|
|
50% { width: 42%; }
|
|
100% { width: 50%; }
|
|
}
|
|
@keyframes progress-2 {
|
|
0% { width: 50%; }
|
|
50% { width: 60%; }
|
|
100% { width: 65%; }
|
|
}
|
|
@keyframes progress-3 {
|
|
0% { width: 65%; }
|
|
100% { width: 75%; }
|
|
}
|
|
@keyframes progress-4 {
|
|
0% { width: 75%; }
|
|
100% { width: 85%; }
|
|
}
|
|
@keyframes progress-5 {
|
|
0% { width: 85%; }
|
|
100% { width: 90%; }
|
|
}
|
|
@keyframes progress-6 {
|
|
0% { width: 90%; }
|
|
100% { width: 94%; }
|
|
}
|
|
@keyframes progress-7 {
|
|
0% { width: 94%; }
|
|
50% { width: 96%; }
|
|
75% { width: 90%; }
|
|
100% { width: 96%; }
|
|
}
|
|
@keyframes progress-8 {
|
|
0% { width: 95%; }
|
|
50% { width: 97%; }
|
|
75% { width: 94%; }
|
|
100% { width: 98%; }
|
|
}
|
|
|
|
.hide { display: none; }
|
|
|
|
.why-am-i-seeing-this {
|
|
color: #808080a6;
|
|
font-family: Tahoma, 'Trebuchet MS', sans-serif;
|
|
max-width: 25rem;
|
|
border: 2px solid #808080a6;
|
|
border-radius: 6px;
|
|
padding: 0.5rem;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
background: #8080800d;
|
|
font-size: 0.9rem;
|
|
}
|
|
.why-am-i-seeing-this h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
.why-am-i-seeing-this p {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Refresh the page every 10 seconds
|
|
const refreshRate = 10000;
|
|
setTimeout(() => { location.reload(); }, refreshRate);
|
|
|
|
// Get current stage
|
|
let initStage = parseInt(sessionStorage.getItem('initStage') || 0);
|
|
|
|
// Check if stage in session storage is old, and if so, reset it
|
|
const now = Math.round(Date.now()/1000);
|
|
const buildStarted = sessionStorage.getItem('buildStarted');
|
|
if (!buildStarted) { // First time build
|
|
sessionStorage.setItem('buildStarted', now);
|
|
} else if ((now - parseInt(buildStarted)) > 600) {
|
|
initStage = 0;
|
|
sessionStorage.setItem('buildStarted', now);
|
|
}
|
|
|
|
// Grab elements from page
|
|
const statusTextElem = document.getElementById('status-text');
|
|
const progressBarElem = document.getElementById('bar');
|
|
const progressOuterElem = document.getElementById('bar-outer');
|
|
const loadingDotsElem = document.getElementById('dots');
|
|
const noteElem = document.getElementById('note');
|
|
|
|
// Based on stage, modify element content/ styles
|
|
if (initStage === 0) {
|
|
statusTextElem.innerHTML = 'Initializing'
|
|
progressBarElem.classList.add('stage-0');
|
|
} else if (initStage === 1) {
|
|
statusTextElem.innerHTML = 'Running Checks'
|
|
progressBarElem.classList.add('stage-1');
|
|
} else if (initStage === 2) {
|
|
statusTextElem.innerHTML = 'Building'
|
|
progressBarElem.classList.add('stage-2');
|
|
} else if (initStage === 3) {
|
|
statusTextElem.innerHTML = 'Building'
|
|
progressBarElem.classList.add('stage-3');
|
|
} else if (initStage === 4) {
|
|
statusTextElem.innerHTML = 'Finishing Off'
|
|
progressBarElem.classList.add('stage-4');
|
|
} else if (initStage === 5) {
|
|
statusTextElem.innerHTML = 'Almost Done'
|
|
progressBarElem.classList.add('stage-5');
|
|
} else if (initStage === 6) {
|
|
statusTextElem.innerHTML = 'Not Long Left'
|
|
progressBarElem.classList.add('stage-6');
|
|
} else if (initStage === 7) {
|
|
statusTextElem.innerHTML = 'Taking Longer than Expected'
|
|
progressBarElem.classList.add('stage-7');
|
|
noteElem.innerHTML = 'See the console for more info';
|
|
} else if (initStage >= 8) {
|
|
const docsLink = '<a href="https://github.com/Lissy93/dashy/tree/master/docs#readme">Documentation</a>';
|
|
statusTextElem.innerHTML = 'Possible Error, Check Logs'
|
|
noteElem.innerHTML = 'For troubleshooting, please see the ' + docsLink;
|
|
progressOuterElem.classList.add('hide');
|
|
loadingDotsElem.classList.add('hide');
|
|
} else {
|
|
statusTextElem.innerHTML = 'Building App'
|
|
progressOuterElem.classList.add('hide')
|
|
}
|
|
// Iterate the stage number
|
|
sessionStorage.setItem('initStage', initStage + 1)
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|