mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-04 15:08:01 +00:00
cv
0f26be3c17
small improvements in app style - fade in splash screen - notifications without sound - change header style - non selectable text app wide - change logo - lock button more accessible - link to help - tooltip on collapse delay - tooltip on private / public event toggle
105 lines
2.3 KiB
HTML
105 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; style-src 'unsafe-inline'; script-src 'self'"
|
|
/>
|
|
<title>ontime</title>
|
|
<style>
|
|
body {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-app-region: drag;
|
|
animation: fadein 0s;
|
|
background-color: #0005;
|
|
}
|
|
h1 {
|
|
font-family: Roboto, sans-serif;
|
|
font-weight: 100;
|
|
color: #fffa;
|
|
font-size: 24px;
|
|
}
|
|
.container {
|
|
margin-top: 5vh;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.lds-ellipsis {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 71px;
|
|
}
|
|
.lds-ellipsis div {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #ff7597aa;
|
|
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
}
|
|
.lds-ellipsis div:nth-child(1) {
|
|
left: 8px;
|
|
animation: lds-ellipsis1 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(2) {
|
|
left: 8px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(3) {
|
|
left: 32px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(4) {
|
|
left: 56px;
|
|
animation: lds-ellipsis3 0.6s infinite;
|
|
}
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis3 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis2 {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(24px, 0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<img src="../../assets/logo.png" />
|
|
<h1>ontime · event timers</h1>
|
|
<div class="lds-ellipsis">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|