mirror of
https://github.com/NaitLee/Cat-Printer.git
synced 2025-05-17 15:50:11 -07:00
125 lines
3.8 KiB
HTML
125 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!-- For replacing python-for-android webview bootstrap _load.html -->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Loading</title>
|
|
<style>
|
|
:root {
|
|
--fore-color: #111;
|
|
--back-color: #eee;
|
|
--notice-error: rgba(255, 0, 0, 0.2);
|
|
--font-size: 1rem;
|
|
--line-height: 1.8em;
|
|
--anim-time: 0.5s;
|
|
--span: 8px;
|
|
--span-double: calc(var(--span) * 2);
|
|
}
|
|
body {
|
|
background-color: var(--back-color);
|
|
color: var(--fore-color);
|
|
font-size: var(--font-size);
|
|
line-height: var(--line-height);
|
|
}
|
|
a:link, a:visited {
|
|
color: #33f;
|
|
}
|
|
a:hover, a:active {
|
|
color: #22f;
|
|
}
|
|
@media (prefers-reduced-motion) {
|
|
body {
|
|
transition-duration: 0ms !important;
|
|
transition: none;
|
|
animation-timing-function: steps(1);
|
|
animation-duration: 0ms !important;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--fore-color: #eee;
|
|
--back-color: #333;
|
|
}
|
|
}
|
|
@keyframes jump {
|
|
0% { transform: translateY(0); }
|
|
50% { transform: translateY(var(--font-size)); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
#loading-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--back-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
transition: opacity var(--anim-time) var(--curve);
|
|
}
|
|
.logo {
|
|
background-image: url('icon.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 80%;
|
|
max-width: 16em;
|
|
height: 80%;
|
|
max-height: 16em;
|
|
margin: 0 auto;
|
|
}
|
|
#loading-screen.hidden {
|
|
opacity: 0;
|
|
}
|
|
#loading-screen>.dots {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
#loading-screen>.dots>span {
|
|
display: inline-block;
|
|
width: var(--font-size);
|
|
height: var(--font-size);
|
|
margin: var(--font-size);
|
|
background-color: var(--fore-color);
|
|
border-radius: calc(var(--font-size) / 2);
|
|
animation: jump 1s ease 0s infinite;
|
|
}
|
|
#loading-screen>.dots>span:nth-child(1) { animation-delay: 0s; }
|
|
#loading-screen>.dots>span:nth-child(2) { animation-delay: 0.3s; }
|
|
#loading-screen>.dots>span:nth-child(3) { animation-delay: 0.6s; }
|
|
|
|
.noscript {
|
|
margin: var(--span-double);
|
|
text-align: center;
|
|
background-color: var(--notice-error);
|
|
display: block;
|
|
}
|
|
a {
|
|
transition: all var(--anim-time) ease-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="loading-screen">
|
|
<div class="logo"></div>
|
|
<div class="dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<noscript>
|
|
<p class="noscript">
|
|
<span>Please enable JavaScript!</span><br />
|
|
<a href="jslicense.html" data-i18n="javascript-license-information"
|
|
data-jslicense="1" >JavaScript License Information</a>
|
|
</p>
|
|
</noscript>
|
|
</div>
|
|
</body>
|
|
</html> |