fred.boniface/OwlBoard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Begin work on board.html page

Browse Source
This commit is contained in:
Fred Boniface 2022-12-19 22:54:23 +00:00
parent dc6e40f3fa
commit f0a6b66cad
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/board.html
View File

@ -8,12 +8,17 @@
<link rel="manifest" type="application/json" href="./manifest.json"/>
</head>
<body>
<div id="loading">
<div id="content">
<div id="loading">
<div class="spinner">
</div>
<p>Loading <span id="station"></span></p>
</div>
</div>
<div id="output">
<div>
<p id="output"></p>
</div>
</div>
</body>
</html>

37
static/styles/boards.css
View File

@ -0,0 +1,37 @@
/* Loading Box: */
@keyframes spinner {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.spinner::before {
animation: 1.5s linear infinite spinner;
animation-play-state: inherit;
border: solid 5px var(--overlay-color);
border-bottom-color: white;
border-radius: 50%;
content: "";
height: 40px;
width: 40px;
position: absolute;
top: 30%;
margin: auto;
transform: translate3d(-50%, -50%, 0);
will-change: transform;
}
#loading {
position: absolute;
top: 45%;
margin: auto;
background-color: var(--overlay-color);
border-radius: 45px;
padding: 20px;
padding-bottom: 1px;
min-width: 90px;
}
#loading p {
padding-top: 50px;
}