CJ/Uptime-Kuma-Status-Page
1
0
Fork 0
Code Issues Pull Requests Activity

Upload files to "/"

Browse Source
This commit is contained in:
CJ
2026-01-18 11:51:52 +00:00
commit 1c2e8c41d1
4 changed files with 235 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LICENSE
+9
View File
@@ -0,0 +1,9 @@
MIT License
Copyright (c) 2024 CJ
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
README.md
+22
View File
@@ -0,0 +1,22 @@
# Status-Page <a href='https://ko-fi.com/cjgameslive' target='_blank'><img height='35' align='right' style='border:0px;height:46px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
A simple webpage to keep an eye on Uptime Kuma's [overall status](https://github.com/louislam/uptime-kuma/pull/2574). The page also displays the full date which refreshes at midnight, the current time which updates every second, and how long until the status refreshes.
![Simple Dashboard](https://gitea.cjgameslive.com/CJ/Uptime-Kuma-Status-Page/raw/branch/main/img/Simple%20Dash.PNG)
## Things you can personalise
### Fonts
You can set any font on line 13 `font-family: 'Play', sans-serif;`, the Play font is imported from Google on line 7 `<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">`.
### Badges
On lines 93 and 98 you will want to update the URL `http://..../api/status-page/{slug}/badge?label=Containers%20are`
- `...` will be the IP address or domain of your Uptime Kuma (e.g., `http://192.168.1.5:3001`).
- `{slug}` being the status page (mine is just set to `all` to monitor all).
- `?label=Containers%20are` can be changed to any label you want to appear on the badge, or can be dropped for a badge which will just display `Up`, `Down`, `Degraded`, or `Maintenance`.
In this exaple the API call would be to `http://192.168.1.5:3000/api/status-page/all/badge?label=Containers%20are`
### Refresh interval
Unless you are going completely custom, the only other change I would reccomend is to line 164 and 168. `300000` sets the refresh interval for the badges to 5 minutes by default, and `300` sets the next update tomer to 5 minutes by default.
Simple Dash.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

index.html
+204
View File
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pi Status Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
<style>
body {
background-color: #121212;
color: #fff;
margin: 0;
font-family: 'Play', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.badge-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px; /* Adjust margin as needed */
}
.badge {
font-size: 36px;
padding: 20px; /* Increased padding */
background-color: #444;
border-radius: 10px; /* Increased border radius */
}
.title {
font-size: 30px; /* Increased font size */
margin-bottom: 10px; /* Increased margin */
}
.divider {
width: 2px;
height: 150px; /* Increased height */
background-color: #777;
margin: 0 40px; /* Adjusted margin */
}
.clock {
font-size: 50px; /* Increased font size */
margin-top: 30px; /* Increased margin */
}
.date {
font-size: 45px; /* Increased font size */
margin-top: 30px; /* Increased margin */
}
.timer {
position: fixed;
bottom: 10px; /* Adjust this value to set the distance from the bottom */
right: 10px; /* Adjust this value to set the distance from the right */
font-size: 25px;
color: gray;
}
/* Ensure dark mode */
@media (prefers-color-scheme: light) {
body {
background-color: #121212;
color: #fff;
}
.badge {
background-color: #444;
}
}
</style>
</head>
<body>
<div class="date" id="date"></div>
<p>
<div class="container">
<div class="badge-container">
<div class="title">Pi 4</div>
<img class="badge" id="badgeImage1" src="http://..../api/status-page/{slug}/badge?label=Containers%20arelabel=Containers%20are" alt="Pi 4 Status" width="250" height="40">
</div>
<div class="divider"></div>
<div class="badge-container">
<div class="title">Pi 5</div>
<img class="badge" id="badgeImage2" src="http://..../api/status-page/{slug}/badge?label=Containers%20are" alt="Pi 5 Status" width="250" height="40">
</div>
</div>
<div class="clock" id="clock"></div>
<span id="timer" class="timer"></span>
<script>
// function to diplay the date
function displayDate() {
var currentDate = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var dateString = currentDate.toLocaleDateString('en-GB', options);
document.getElementById('date').innerText = dateString;
}
// Function to update date every day
function refreshAtMidnight() {
var now = new Date();
var night = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + 1, // the next day, midnight
0, 0, 0 // midnight
);
var timeToMidnight = night - now;
setTimeout(function () {
location.reload();
}, timeToMidnight);
}
// Initial call to update date at midnight
displayDate();
refreshAtMidnight();
// Function to update clock
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
var timeString = hours + ":" + minutes + ":" + seconds;
document.getElementById('clock').textContent = timeString;
setTimeout(updateClock, 1000); // Update every second
}
// Function to refresh badges every 5 minutes
function refreshBadges() {
// Badge 1
var badgeImage1 = document.getElementById('badgeImage1');
var url1 = badgeImage1.src;
badgeImage1.src = "";
setTimeout(function() {
badgeImage1.src = url1;
}, 100);
// Badge 2
var badgeImage2 = document.getElementById('badgeImage2');
var url2 = badgeImage2.src;
badgeImage2.src = "";
setTimeout(function() {
badgeImage2.src = url2;
}, 100);
// Restart timer
updateTimer(300); // Restart the timer for 5 minutes
}
// Call refreshBadges() function every 5 minutes
setInterval(refreshBadges, 300000); // 5 minutes
// Function to update the countdown timer
function updateTimer(seconds) {
let timerElement = document.getElementById('timer');
if (!timerElement) {
const newTimerElement = document.createElement('span');
newTimerElement.id = 'timer';
newTimerElement.className = 'timer';
document.body.appendChild(newTimerElement);
timerElement = newTimerElement;
}
let countdown = seconds;
const timerInterval = setInterval(() => {
const minutes = Math.floor(countdown / 60);
const remainingSeconds = countdown % 60;
if (countdown <= 0) {
clearInterval(timerInterval);
timerElement.textContent = ''; // Clear timer text
// Call any additional function needed after countdown reaches 0
} else {
timerElement.textContent = 'Next update in ' + minutes + ' min ' + remainingSeconds + ' sec';
}
countdown--;
}, 1000);
}
// Call updateTimer(seconds) with the desired time interval (in seconds)
updateTimer(300); // This example sets the timer to 5 minutes (300 seconds)
// Initial call to update clock
updateClock();
</script>
</body>
</html>