From 80204a358353c9f0309a54122e073056b7fae920 Mon Sep 17 00:00:00 2001 From: Filip Znachor Date: Wed, 1 Nov 2023 00:05:40 +0100 Subject: [PATCH] improved design, added favicon & date format + timezone settings --- config.inc.php | 3 ++ model/page.php | 8 ++++- public/icon.webp | Bin 0 -> 5730 bytes public/style.css | 70 +++++++++++++++++++++++++++++------------- view/header.twig | 9 ++++-- view/icon/warning.svg | 2 +- view/index.twig | 3 +- 7 files changed, 67 insertions(+), 28 deletions(-) create mode 100644 public/icon.webp diff --git a/config.inc.php b/config.inc.php index b998b39..90e4b18 100644 --- a/config.inc.php +++ b/config.inc.php @@ -5,6 +5,9 @@ define("UPTIME_KUMA_PAGE", "public"); define("ENABLE_TWIG_CACHE", false); +define("DATE_FORMAT", "M j, Y, g:i a"); +define("TIMEZONE", "Etc/UTC"); + define("MONITOR_OPTIONS", [ 4 => ["rich" => true] ]); diff --git a/model/page.php b/model/page.php index 57bae04..f6517b0 100644 --- a/model/page.php +++ b/model/page.php @@ -8,9 +8,13 @@ class Page { private int $online = 0; private int $total = 0; private array $groups = []; + private string $date_format; + private string $timezone; public function __construct(array $page) { $this->page = $page; + $this->date_format = DATE_FORMAT; + $this->timezone = TIMEZONE; } public function add_group(Group $group) { @@ -28,7 +32,9 @@ class Page { "page" => $this->page, "online" => $this->online, "total" => $this->total, - "groups" => $groups + "groups" => $groups, + "date_format" => $this->date_format, + "timezone" => $this->timezone ]; } diff --git a/public/icon.webp b/public/icon.webp new file mode 100644 index 0000000000000000000000000000000000000000..ae6e659643d924570d2828106816740415f5ff3a GIT binary patch literal 5730 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 UVqtT|niwcI+sYP^jDJ`F0CLPa;Q#;t literal 0 HcmV?d00001 diff --git a/public/style.css b/public/style.css index d048e08..9c8a4b1 100644 --- a/public/style.css +++ b/public/style.css @@ -1,20 +1,40 @@ :root { + --border-radius: .35rem; - --green-color: #10b981; - --red-color: #f87171; - --yellow-color: #ffdd6d; + + --title-color: #fff; + --text-color: #fff9; + --bg-color: #0f121a; + + --card-bg-color: #23273191; + --card-border-color: #21242d; + + --green-color: 16, 185, 129; + --red-color: 248, 113, 113; + --yellow-color: 255, 187, 109; + } body { - color: #fff; - background-color: #0f121a; + color: var(--text-color); + background-color: var(--bg-color); font-family: Cantarell, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; + line-height: 1.15; +} + +* { + box-sizing: border-box; } :is(header, section) > .inner { max-width: 750px; margin: auto; + padding: 0 10px; +} + +h1, h2, h3, h4 { + color: var(--title-color); } h3, h4 { @@ -38,9 +58,8 @@ header::after { top: 0; left: 0; width: 100%; - height: 100%; - background-image: radial-gradient(circle at 50% 0, var(--color) 0, transparent 400px); - opacity: .1; + height: 450px; + background-image: radial-gradient(circle at 50% 0, rgb(var(--color), .2) 0, transparent 400px); z-index: -1; } @@ -56,20 +75,29 @@ header.none { --color: var(--red-color); } -header svg { - color: var(--color); +header .icon { + color: rgb(var(--color)); + border-radius: 50%; + max-width: 50px; + padding: 5px; + margin: auto; + position: relative; + display: flex; + background-image: linear-gradient(-45deg, rgb(var(--color), .1) 0%, rgb(var(--color), .5) 100%); } -header svg { - max-width: 50px; +header .icon svg { + filter: drop-shadow(0 0 10px var(--bg-color)); } +header p {font-size: .9rem;} + /* GROUP */ .group { - background: #191c24; - border: 1px solid rgb(33 36 45); + background: var(--card-bg-color); + border: 1px solid var(--card-border-color); margin: 10px 0; padding: 10px; border-radius: var(--border-radius); @@ -95,14 +123,14 @@ header svg { } .group > .header .status { - opacity: .4; + opacity: .7; } /* MONITOR */ .monitor { - --color: #fff2; + --color: 150, 150, 150; } .monitor > .inner { @@ -119,13 +147,13 @@ header svg { } .monitor .icon { - color: var(--color); + color: rgb(var(--color)); display: flex; } .monitor .uptime { font-size: .9rem; - color: var(--color); + color: rgb(var(--color)); } @@ -149,7 +177,7 @@ header svg { .heartbeats .items > * { flex: 1; - background-color: var(--color); + background-color: rgb(var(--color)); border-radius: var(--border-radius); } @@ -157,7 +185,7 @@ header svg { display: flex; justify-content: space-between; font-size: .9rem; - opacity: .5; + opacity: .7; line-height: 1; } @@ -178,5 +206,5 @@ header svg { } .monitor.status-2, .monitor .heartbeats .status-2 { - --color: var(--red-color); + --color: var(--yellow-color); } \ No newline at end of file diff --git a/view/header.twig b/view/header.twig index 3195e8b..e59dbb3 100644 --- a/view/header.twig +++ b/view/header.twig @@ -2,19 +2,22 @@
{% if online == total %} - {{ include("./icon/success.svg") }} +
{{ include("./icon/success.svg") }}

All services are online

{% elseif online == 0 %} - {{ include("./icon/error.svg") }} +
{{ include("./icon/error.svg") }}

All services are down

{% else %} - {{ include("./icon/warning.svg") }} +
{{ include("./icon/warning.svg") }}

Some services are down

{% endif %} +

+ Last updated on {{ now | date(date_format, timezone) }}. +

\ No newline at end of file diff --git a/view/icon/warning.svg b/view/icon/warning.svg index 0aaaf89..95cf560 100644 --- a/view/icon/warning.svg +++ b/view/icon/warning.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/view/index.twig b/view/index.twig index 5b49848..f9bb66f 100644 --- a/view/index.twig +++ b/view/index.twig @@ -5,13 +5,12 @@ {{ page.title }} - + {{ include('./header.twig') }}
-

{{ page.title }}

{% for group in groups %} {{ include('./group.twig') }} {% endfor %}