From 2594fc255cd3e65f7471c31038765a8596fbda94 Mon Sep 17 00:00:00 2001 From: alemi Date: Tue, 3 Dec 2024 20:09:35 +0100 Subject: [PATCH] feat: loading indicator, time margins indicators --- web/index.html | 35 +++++++++++++++++++++++++++++------ 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/web/index.html b/web/index.html index ad2d168..ce4da5c 100644 --- a/web/index.html +++ b/web/index.html @@ -82,6 +82,24 @@ div.content { min-height: calc(100vh - 3.5rem); } + span.dots { + &:after { + animation: dots 1.5s linear infinite; + display: inline-block; + content: "\00a0\00a0\00a0"; + } + } + @keyframes dots { + 0% { content: "\00a0\00a0\00a0"; } + 25% { content: ".\00a0\00a0"; } + 50% { content: "..\00a0"; } + 75% { content: "..."; } + 100% { content: "\00a0\00a0\00a0"; } + } + .grid { + display: grid; + grid-template-columns: 1fr 1fr; + } @@ -93,7 +111,7 @@
- +

loading

@@ -123,17 +141,22 @@ function cell(timestamp, rtt) { function card(key, history, last_rtt) { let bar = ""; let now = Math.floor(Date.now() / 1000); - let first = history[0][0]; + let first = history[history.length - 1][0]; let hrs_ago = (now - first) / 3600; for (let el of history) { bar += cell(el[0], el[1]); } return `

${key} ${last_rtt ? last_rtt + 'ms' : 'DOWN'}

-
- ${bar} -

^ ~${hrs_ago.toFixed(1)}h ago

-
+ + + + + + + + +
${bar}
^ now~${hrs_ago.toFixed(1)}h ago ^
`; }