-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
43 lines (43 loc) · 2.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="de">
<head>
<title>micb25.github.io/RKI_Monkeypox</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Michael Böhme">
<meta name="robots" content="all">
<style>
html, body {margin: 0; padding: 0; }
ul {list-style-type: none; text-align: center; margin: 0; padding: 0; overflow: hidden; line-height: 35vw; height: 45vw; max-height: 45vw;}
li {display: inline-block; vertical-align: top; position: relative; width: 45vw; margin: 0 0vw;}
h2 {font-family: sans-serif; font-size: 30vw; border: 0; outline: none; text-align: center; width: 100%; width: 100%; margin: 0; padding: 0;}
progress { margin: 1em 1em; padding: 0em 0em; border: 0; height: 2em; width: calc(100vw - 2em); }
code {font-weight: normal; font-size: 1.2em; border: 1px solid #999; border-radius: .3em; padding: .2em .5em;}
.units { line-height: 10vw; font-size: 6vw; }
.keytable { margin:auto; }
.keycolumn { width: 5vw; text-align: center; }
.keydesc { width: 10vw; }
.keytable tr { line-height: 2em; }
</style>
</head>
<body>
<ul>
<li><h2 class="clock info" id="min">00</h2><div class="units">minutes</div></li>
<li style="width: 8vw;"><h2 class="clock info" id="sep">:</h2><div> </div></li>
<li><h2 class="clock info" id="sec">00</h2><div class="units">seconds</div></li>
</ul>
<progress value=50 max=100 id="progress"></progress>
<table class="keytable">
<tr>
<td class="keycolumn"><code>space</code></td>
<td class="keydesc"> start/pause timer</td>
<td class="keycolumn"><code>R</code></td>
<td class="keydesc"> reset timer</td>
<td class="keycolumn"><code>S</code></td>
<td class="keydesc"> set timer</td>
</tr>
</table>
<script src="./js/timer.js"></script>
</body>
</html>