diff --git a/README.md b/README.md index 57534863..45f43430 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# gatus +![Gatus](static/logo-with-name.png) ![build](https://github.com/TwinProduction/gatus/workflows/build/badge.svg?branch=master) [![Go Report Card](https://goreportcard.com/badge/github.com/TwinProduction/gatus)](https://goreportcard.com/report/github.com/TwinProduction/gatus) diff --git a/static/index.html b/static/index.html index 5fd0c2fe..00ed3aa6 100644 --- a/static/index.html +++ b/static/index.html @@ -31,11 +31,18 @@ } .status { cursor: pointer; - transition: opacity 500ms ease-in-out; + transition: all 500ms ease-in-out; + overflow-x: hidden; + padding: .25em 0; + color: white; + } + .title { + font-size: 2.5rem; } .status:hover { opacity: 0.7; transition: opacity 100ms ease-in-out; + color: black; } .status-over-time { overflow: auto; @@ -48,6 +55,9 @@ opacity: 0.5; margin-top: 5px; } + .status-min-max-ms { + overflow-x: hidden; + } #tooltip { position: fixed; top: 0; @@ -76,9 +86,16 @@ -
-
-
Health Status
+
+
+
+
+
Health Status
+
+
+ GaTuS +
+
@@ -136,6 +153,9 @@ let tooltipBoundingClientRect = document.querySelector('#tooltip').getBoundingClientRect(); if (targetLeftPosition + window.scrollX + tooltipBoundingClientRect.width + 50 > document.body.getBoundingClientRect().width) { targetLeftPosition = element.getBoundingClientRect().x - tooltipBoundingClientRect.width + element.getBoundingClientRect().width; + if (targetLeftPosition < 0) { + targetLeftPosition += -targetLeftPosition; + } } if (targetTopPosition + window.scrollY + tooltipBoundingClientRect.height + 50 > document.body.getBoundingClientRect().height) { targetTopPosition = element.getBoundingClientRect().y - (tooltipBoundingClientRect.height + 10) @@ -198,11 +218,11 @@ output += "" + "
" + "
" - + "
" + + "
" + " " + serviceName + " - " + hostname + "" + "
" - + "
" - + " " + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms" + + "
" + + " " + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms" + "
" + "
" + "
" @@ -231,7 +251,7 @@ let hh = ((date.getHours())<10?"0":"")+""+(date.getHours()); let mm = ((date.getMinutes())<10?"0":"")+""+(date.getMinutes()); let ss = ((date.getSeconds())<10?"0":"")+""+(date.getSeconds()); - return YYYY+"-"+MM+"-"+DD+" "+hh+":"+mm+":"+ss; + return YYYY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss; } function generatePrettyTimeAgo(t) { diff --git a/static/logo-256px.png b/static/logo-256px.png new file mode 100644 index 00000000..9f90e815 Binary files /dev/null and b/static/logo-256px.png differ diff --git a/static/logo-candidate.png b/static/logo-candidate.png new file mode 100644 index 00000000..4a566059 Binary files /dev/null and b/static/logo-candidate.png differ diff --git a/static/logo-with-name.png b/static/logo-with-name.png new file mode 100644 index 00000000..1e39692a Binary files /dev/null and b/static/logo-with-name.png differ diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 00000000..fd49e1ae Binary files /dev/null and b/static/logo.png differ