Added 25%, 50%, 75% progress markers

This commit is contained in:
Felix Homa 2024-02-08 19:36:57 +01:00
parent 79e12cb217
commit eeee58220d
Signed by: felix.homa
GPG Key ID: 43610F311720D3DA
1 changed files with 8 additions and 1 deletions

View File

@ -22,7 +22,13 @@
<h1 align="center" id="titleh1">Klausurhelfer</h1>
</div>
<div id="clock_div">
<progress style="width: 100vw;height: 3vh; background-color: #fff;" value="0" max="100" id="timebar">&nbsp;</progress>
<progress style="width: 100vw;height: 3vh; background-color: #fff; top:0; left:0;" value="0" max="100" id="timebar">&nbsp;</progress>
<!-- 25%, 50% and 75% markers -->
<ul style="list-style: none; top:0; left:0; position: absolute; margin:0; padding:0">
<li style="left: calc(25vw - 2.5px); top: 0; list-style: none; position: absolute; height: 3vh; width:5px; background-color: #0ff8;" />
<li style="left: calc(50vw - 2.5px); top: 0; list-style: none; position: absolute; height: 3vh; width:5px; background-color: #0ff8;" />
<li style="left: calc(75vw - 2.5px); top: 0; list-style: none; position: absolute; height: 3vh; width:5px; background-color: #0ff8;" />
</ul>
<h1 id="clock" class="time" style="text-align: center">...</h1>
</div>
<div id="left">
@ -558,6 +564,7 @@
grid-area: 2 / 1 / span 1 / span 2;
text-align: center;
font-weight: 600;
position: relative;
}
#clock {