improved design, added favicon & date format + timezone settings

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]
 ]);

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
 		];
 	}
 

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);
 }

view/header.twig

@@ -2,19 +2,22 @@
 	<div class="inner">
 		{% if online == total %}
 
-			{{ include("./icon/success.svg") }}
+			<div class="icon">{{ include("./icon/success.svg") }}</div>
 			<h1>All services are online</h1>
 
 		{% elseif online == 0 %}
 
-			{{ include("./icon/error.svg") }}
+			<div class="icon">{{ include("./icon/error.svg") }}</div>
 			<h1>All services are down</h1>
 
 		{% else %}
 
-			{{ include("./icon/warning.svg") }}
+			<div class="icon">{{ include("./icon/warning.svg") }}</div>
 			<h1>Some services are down</h1>
 
 		{% endif %}
+		<p>
+			Last updated on {{ now | date(date_format, timezone) }}.
+		</p>
 	</div>
 </header>

view/icon/warning.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.75 1.75 20.5 20.5"><path fill="currentColor" d="M1 21L12 2l11 19H1Zm11-3q.425 0 .713-.288T13 17q0-.425-.288-.713T12 16q-.425 0-.713.288T11 17q0 .425.288.713T12 18Zm-1-3h2v-5h-2v5Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.75 1.75 20.5 20.5"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-1-7v2h2v-2h-2Zm0-8v6h2V7h-2Z"/></svg>

view/index.twig

@@ -5,13 +5,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>{{ page.title }}</title>
 		<link rel="stylesheet" href="/style.css">
-		<link rel="icon" href="/icon.png" type="image/png">
+		<link rel="icon" href="/icon.webp" type="image/webp">
 	</head>
 	<body>
 		{{ include('./header.twig') }}
 		<section>
 			<div class="inner">
-				<h1>{{ page.title }}</h1>
 				{% for group in groups %}
 					{{ include('./group.twig') }}
 				{% endfor %}